讲 
网 绍 开 发 视频 大 


答 光 清华 社 " 祯 跨 大 放电 "大 系 ] 
讲 滞 


移动 端 /PC 端 同步 学 习 ，QQ 群 / 微 信 群 随时 答疑 。 
速 查 、 高 效 、 实 用 ， 增 强 实战 能 力 。 
先 观摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


随 用 随 取 ， 提 升 设 计 效率 ， 快 速 进 阶 开发 高 手 行列 。 





HTML5+CSS3 


从 入 门 到 精通 BE 


前 端 科技 @ 编 著 
5 大 类 线 上 资源 海量 资源 ， 可 查 可 用 
@ 教 学 微 视频 ( 335 节 ) @ 前 端 案例 资源 库 ( 4900 个 ) 
@ 拓 展 微 阅读 ( 188 页 ) 人 @ 面 试题 库 ( 1036 道 ) 
@ 在 线 微 练习 ( 271 项 ) 人 @ 网 页 模板 库 ( 1500 套 ) 
@ 示 例 效果 (84 个 ) 人 @ 设 计 素 材 库 ( 12000 个 ) 
全 权威 参考 (18 个 ) 


清华 大 学 出 版 社 





策 时 清 竺 社 * 视 频 大 读 刻 "天 未 
网 络 天 发 现 频 大 讲演 


HTML5+CSS3 从 入 门 到 精通 
( 微 课 精 编 版 ) 


前 端 科技 ”编著 


内 容 简 介 
《HTML5+CSS3 从 入 门 到 精通 ( 微 课 精 编 版 )》 从 初学 者 角度 出 发 , 通过 通俗 易 懂 的 语言 、 丰 富 多 彩 的 实例 ， 


详细 介绍 了 HTML5+CSS3 前 端 开发 技术 及 其 应 用 。 本 书 共 25 章 ， 包 括 HTMLS5 基础 、HIMLS 新 增 元 素 和 文档 
结构 、HTMLS5 表单 、HIMLS 绘图 和 动画 、HTML5 音频 和 视频 、 数 据 存储 、 应 用 程序 缓存 、 多 线程 编程 、 位 置 
信息 、 历 史记 录 、 文 件 操作 、HTMLS5 通信 、WebRTC 视频 直播 、 跨 窗口 操作 、 拖 放 操作 、 异 步 交 互 、 延 迟 处 理 、 
HTML5 其 他 API、CSS3 基础 、CSS3 文本 样式 、CSS3 背景 图 像 和 渐变 背景 、CSS3 用 户 接口 样式 、CSS3 伸缩 
盒 布 局 、CSS3 动画 、CSS3 媒体 查询 等 内 容 。 书 中 所 有 知识 都 结合 具体 实例 进行 介绍 ， 代 码 注释 详尽 ， 读 者 可 
轻松 掌握 前 端 技术 精 能 ， 提 升 实际 开发 能 力 。 


除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资源 ， 主 要 内 容 如 下 : 


335 节 同步 教学 微 视频 15000 项 设计 素材 资源 
188 页 拓展 知识 微 阅读 4800 个 前 端 开 发 案例 
550 个 实例 案例 分 析 48 本 权威 参考 学 习 手 册 
271 个 在 线 微 练习 1036 道 企业 面试 真题 


本 书 可 作为 前 端 开发 、 移 动 开发 入 门 者 的 自学 用 书 ， 也 可 作为 高 等 院 校 及 相关 培训 机 构 的 教学 参考 用 书 。 


本 书 封 面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


HTML5+CSS3 从 入 门 到 精通 ， 微 课 精 编 版 / 前 端 科技 编著 . 一 北京 : 清华 大 学 出 版 社 ，2018 
(清华 社 “ 视 频 大 讲堂 ”大 系 网 络 开发 视频 大 讲堂 7 
ISBN 978-7-302-50253-1 


I. @H… 本. @ 前 … 了 HQ@ 超 文本 标记 语言 一 程序 设计 @ 网 页 制作 工具 IV. QIP312.8 @TP393. 092.2 
中 国 版 本 图 书馆 CIP 数据 核 字 (2018) 第 114828 号 


责任 编辑 ， 贾 小 红 
封面 设计 ， 李 志 伟 
版 式 设计 : 周 春 梅 
责任 校对 : 赵 丽 杰 
责任 印 制 : 


出 版 发 行 : 清华 大 学 出 版 社 


网 址 : http://www. tup. com. cn，http://www. wqbook. com 

地 ” 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮编 : 100084 

社 总 机 : 010-62770175 邮  ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015，zhiliang@tup. tsinghua. edu. cn 





印 刷 者 : 

装 订 者 : 

经 ” 销 ; 全 国 新 华 书店 

开 ”本 : 203mmX260mm 印 ” 张 : 35.25 字 数 : 1040 千 字 

版 ”次 : 2018 年 8 月 第 1 版 印 ”次 : 2018 年 8 月 第 1 次 印刷 
定 ” 价 : 79.80 元 

产品 编号 : 078946-01 


如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资 源 ， 帮 助 读者 轻松 掌握 HIML5+CSS3 技术 ， 从 小 白 快 速成 
长 为 前 端 开发 高 手 。 









Javascrpt 基础 用 








[一 
i 视频 讲解 | 
纸 质 书 视频 讲解 拓展 学 习 在 线 练习 小 白手 册 
手机 端 +PC 端 ， 线 上 线 下 同步 学 习 


1. 获取 学 习 权限 


学 习 本 书 前 ， 请 先 乔 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手机 扫描 ， 即 可 解锁 本 书 资源 的 学 习 权限 。 


再 扫描 正文 章节 对 应 的 5 类 二 维 码 ， 可 以 观看 视频 讲解 ， 阅 读 线 上 资源 ， 体 验 示例 效果 ， 查 阅 权威 参 
考 资料 和 在 线 练习 提升 ， 全 程 易 懂 、 好 学 、 速 查 、 高 效 、 实 用 。 








副 开 涂 层 , 扫描 获取 学 习 权限 












清华 社 定 广 类 信号 
刮 开 涂 属 2 - 
现 看 本 书 规 频 二 有 信守 效果 外 二 
2. 观看 视频 讲解 


电脑 上 大 屏幕 观看 。 


对 于 初学 者 来 说 , 精彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 , 轻松 理解 和 掌握 知识 
要 点 。 本 书 中 几乎 所 有 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 





下 载 视频 至 手机 ， 推送 视频 至 邮箱 ， 
离线 流畅 观看 随时 PC 端 观 看 


者 Hrssresss 从 入 门 到 精通 ( 微 课 精 编 版 ) 


3. 拓展 线 上 阅读 

| 一 本 书 的 厚度 有 限 , 但 掌握 一 门 技术 却 需要 大 量 的 知识 积累 。 本 书 选择 了 那些 与 学 习 、 就 业 关系 
| 紧密 的 核心 知识 点 印 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 上 ， 读 者 扫描 “ 线 上 阅读 ”二 维 码 ， 即 
可 免费 阅读 数 百 页 的 前 端 开 发 学 习 资 料 ， 获 取 大 量 的 额外 知识 。 


14.4.5 设计 伪 列 页 面 


走向 计 多 拉面 中 ， 四 于 每 个 栏目 高 度 不 一天， 栏目 内 容 痢 居 动态 显示 ， 无 法 预先 定义 ， 寺 笠 就 不可 如 旬 地 出 现 梓 


方 续 一 为 列 有 局 法 。 所 谓 人 施 布 局 法 ， 评 是 设计 一 个 背 晤 你 ， 利 用 背 时 图 人 来 术 报 栏 目的 六 果 。 例 如 ， 以 上 全 示例 
寺 隐 为 基础， 合用 Phoroshoy 疫 计 一 个 长 条 形 的 素 至 ， 长 变 与 页 面 宽度 如 扫 一 至， 高度 任意 ， 妈 图 BI4.6 所 示 ， 


几 i46 全 有 同人 
负 后 ， 为 < 这 -mi 往 人 委 有 时 图 ， 让 大 入 了 轴 平 铺 ， 
main 


Postionese, 
ict Ones 
acegront ermage NE Bl conter rnpeay 
为 了 如 外 汉 月 痛 果 色 的 干 技 ， 不 名 在 CSS 样式 表 申 帮 险 各 昌 色 声 习 这样 所 和 的 然 录 和 此 E147 所 孙 ， 其 中 任 则 一 个 栏 
目 高 度 怕人 变化 它 上 分摊 开 公信 机 。 向 于 公信 和 开 类 天 从 是 一 个 要 并 的 栏目 并 朱 轩 绚 ， 疡 以 就 汉人 一 各 栏 昌 轩 高 的 岂 化 











4. 进行 线 上 练习 
为 方便 读者 巩固 基础 知识 ,提升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练习 题目 。 读 者 扫描 各 章 最 后 
的 “在 线 练习 ”二 维 码 ， 即 可 通过 反复 的 实 操 训 练 加 深 对 知识 的 领悟 程度 。 


rp 
1 4 款 网; 才 格 基本 样式 1 
ET 


2 小 于 例 ; 表格 基本 格 志 





A 











3 小 而 例 ; 表格 基本 样式 3 





A 


4 小 和 全 @; 表情 基本 样式 4 


Pr 


小 全 ; 表情 基本 笠 到 5 











保存 二 维 码 , 在 PC 端 观看 电脑 、 平 板 、 手 机 
进行 练习 (参照 说 明 ) 端 不 同 的 显示 效果 








5. 观看 精彩 示例 效果 
对 于 前 端 设计 、 开 发 来 说 ， 很 多 案例 效果 在 纸 质 书 上 是 无 法 得 到 完美 呈现 的 ， 如 动态 效果 、 绚 丽 
页 面 等 。 因 此 本 书 特意 提供 了 部 分 示例 效果 展示 。 读 者 扫描 案例 旁 的 “示例 效果 ”二 维 码 ， 即 可 在 学 
」 习 过 程 中 直观 感受 到 精彩 的 页 面 效果 。 















XX HTML51CS33 从 入 门 于 通 


谤 开发 F 
Bh 培土 证 未 


者 二 里 过 的 太阳 


五 | 时 自 





如 何 使 用 本 刷 













中 国 移动 加 仿 


X 设备 模拟 器 
观看 电脑 、 平板 、 手机 
端的 不 同 显示 效果 


二 志 入 100% hl 10:29 





爱 过 冬天 之 后 的 我 好 了 一 些 








6. 查阅 权威 参考 资料 
扫描 “权威 参考 ”二 维 码 ， 即 可 跳 转 到 
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7. 其 他 PC 端 资源 下 载 方式 


CR | 
第 -0 | 
Se | 





对 应 知识 的 官方 文档 上 。 通 过 大 量 查阅 ， 真 正 领悟 技术 内 涵 。 | 


除了 前 面 介 绍 过 的 可 以 直接 将 视频 、 拓 展 阅读 等 资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 端 | 


资源 获取 方式 。 


回 ”登录 清华 大 学 出 版 社 官方 网 站 (www.tup.com.cn)， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 
加 ”申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 
加 ”扫描 图 书 封底 二 维 码 ( 文 泉 云 盘 )， 获 得 资源 的 下 载 方式 。 


小 白 实 战 手册 


为 方便 读者 全 面 提升 , 本 书 提供 了 4 本 小 白 学 习 手册 : JavaScript 基础 、JavaScript 函数 编程 基础 、 | 
JavaScript 面向 对 象 编程 以 及 实战 案例 手册 。 这 些 内 容 精 挑 细 选 ， 希 望 成 为 您 学 习 路 上 的 好 帮手 ， 关 | 


键 时 刻 解 您 所 需 。 





| 2 ee 从 入 门 到 精通 ( 微 课 精 编 版 ) 


扫描 小 白手 册封 面 的 二 维 码 ， 可 在 手机 、 平 板 上 学 习 小 白手 册 内 容 。 

















从 小 自 到 高 手 的 虹 变 


| 谷歌 的 创始 人 拉 里 。 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超 过 10000 个 小 时 ， 那 么 你 就 可 以 达到 世 
| 界 级 。 

| 因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 白 ， 只 要 您 按 着 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 
| 令 自己 惊讶 的 技术 大 咖 。 

| (1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

| (2) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

| (3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素 材 拿 来 就 用 ， 学 会 站 在 巨人 的 肩膀 上 。 
| (4) 有 功夫 多 参阅 一 些 官方 权威 指南 ， 拓 展 自己 对 技术 的 理解 和 应 用 能 力 。 

| (5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

| 

| 


| 书本 厚度 有 限 ， 学 习 空间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 希望 本 书 能 帮 您 真正 收获 学 习 的 
| 乐趣 和 知识 。 最 后 ， 祝 您 阅读 快乐 ! 


-IV.: 


了 路 


2 
出 


“网 络 开发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视频 等 ， 备 受 读者 欢迎 。 丛 书 累 计 销售 近 20 万 册 ， 其 中 ，《HTML5+CSS3 从 入 门 到 精通 》 
累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ,在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进 行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 
内 容 ， 重 新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技术 ， 提 供 了 “入 门 学 习 一 实例 应 用 一 项 目 
开发 一 能 力 测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 
发 所 需要 的 核心 精髓 内 容 。 

网 页 制作 技术 可 以 粗略 划分 为 前 台 浏 览 器 端 技术 和 后 台 服务 器 端 技术 。 在 Web 标 准 中 ，HTML 负 
责 页 面 结 构 ，CSS 负 责 样式 表现 。 

网 页 技术 层出不穷 ， 日 新 月 异 ， 但 有 一 点 是 肯定 的 : 不 管 是 采用 什么 技术 设计 的 网 站 ， 用 户 在 客 
户 端 通过 浏览 器 打开 看 到 的 网 页 都 是 静态 网 页 , 都 是 由 HTML 和 CSS 技 术 构 成 的 。 因此 , HTML 和 CSS 
技术 是 网 页 制作 技术 的 基础 和 核心 。 


本 书 内 容 


HTML5 基础 
HTML5 新 增 元 素 和 文档 结构 


HTML5 表单 
HTML5 绘图 和 动画 
HTML5 音频 和 视频 
HTML5 数据 存储 ed 
i 示意 图 、 流 程 图 、 效 果 图 
应 用 程序 缓存 、 多 线程 编程 、 位 

置信 息 、 历 史记 录 、 文 件 操作 、 
HTML 的 | HTML5 通信 、WebRTC 视频 直 
Web 应 用 | 播 、 路 窗口 操作 、 抢 放 操作 、 异 

步 交 互 、 延 迟 处 理 、HTML5 其 

他 API 


精彩 实例 
微 视频 讲解 


拓展 微 阅读 
CSS3 基础 在 线 担 续 习 
CSS3 文本 样式 

CSS3 背景 图 像 和 渐变 背 录 
CSS3 用 户 接口 样式 

CSS3 伸缩 念 布局 

CSS3 动画 

CSS3 媒体 查询 


注意 、 提 示 、 说 明 


前 端 开 发 资源 库 








Note | 








gm SS 


本 书 特点 


1. 由 浅 入 深 ， 编 排 合理 ， 实 用 易学 

本 书面 向 零 基 础 的 初学 者 ， 通 过 “一 个 知识 点 + 一 个 例子 + 一 个 结果 + 一 段 评析 + 一 个 综合 应 用 ” 
的 写作 模式 ， 全 面 、 细 致 地 讲述 了 HTML5S+CSS3 实 际 开发 中 所 需 的 各 类 知识 ， 由 浅 入 深 ， 循 序 渐进 。 
同时 ， 本 书展 示 了 许多 Web 时 代 备 受 欢迎 的 新 知识 ， 读 者 可 学 习 到 与 HTML5 相 关 的 一 些 非常 实用 、 
流行 的 技术 。 

2. 跟着 案例 和 视频 学 ， 入 门 更 容易 

跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方式 。 本 书 案例 丰富 详尽 ， 多 达 550 个 ， 且 
都 附 有 详尽 的 代码 注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案 例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 
限于 理论 ， 尽 情感 受 编程 带 来 的 快乐 和 成 就 感 。 

3. 5 大 类 线 上 资源 ， 多 元 化 学 习 体 验 

为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 5 大 类 线 上 微 资源 ， 通 过 
手机 扫 码 ,读者 可 随时 观看 讲解 视频 ,拓展 阅读 相关 知识 ， 在 线 练习 强化 提升 ， 还 可 以 欣赏 动态 案例 
效果 和 查阅 官方 权威 资料 ， 全 程 便捷 、 高 效 ， 感 受 不 一 样 的 学 习 体验 。 

4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 

本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 





| 通过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 资源 









快速 学 握 前 端 开发 精髓 







详尽 的 配 书 资源 


PSD 网 页 分 层 模板 (426 套 ) 
设计 素材 大 全 (17 类 ，10000 个 ) 


拿 来 就 用 ， 提 升 速度 
历史 经 典 网 页 欣赏 〈508 例 ) 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 案例 大 全 〈1600 例 ) 


HTML5+CSS3+JavaScript 实用 案例 大 全 
(3200 例 ) 专项 专 练 ， 身 经 百 战 











但 | 划 
PHP、MySQL 参考 手册 (5 册 ) 
2 9 本 CSS 参考 手册 
权威 参考 手册 10 本 HTML 参考 手册 拓宽 眼界 ， 提 升 内 功 
23 本 JavaScript 参考 手册 
辐 角 1 本 BPhotoshop 学 习 手 册 
Y HTML、CSS 面试 题 (351 题 ) 
面试 题库 |JavaScript 面试 题 (685 题 ) 打造 超 强 就 业 能 力 
前 端 开发 /设计 面试 经 验 
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读者 对 象 


零 基 础 的 编程 自学 者 。 

相关 培训 机 构 的 老师 和 学 生 。 
大 中 专 院 校 的 老师 和 学 生 。 
参加 毕业 设计 的 学 生 。 

初 、 中 级 程序 开发 人 员 。 


回回 加 图 加 


要 
次 


作为 入 门 书籍 ， 本 书 知识 点 比较 庞杂 ， 所 以 不 可 能 面面俱到 。 技 术 学 习 的 关键 是 方法 ， 本 书 在 很 
多 实例 中 体现 了 方法 的 重要 性 , 读者 只 要 掌握 了 各 种 技术 的 运用 方法 , 在 学 习 更 深入 的 知识 中 可 大 大 
提高 自学 的 效率 。 





本 书 提 供 了 大 量 示例 ， 需 要 用 到 下 、Firefox、Chrome、Opera 等 主流 浏览 器 的 测试 和 预览 。 因 此 ， | 


为 了 测试 示例 或 代码 ， 读 者 需要 安装 上 述 类 型 的 最 新 版 本 浏览 器 ， 各 种 浏览 器 在 CSS3 的 表现 上 可 能 
会 稍 有 差异 。 

限于 篇 幅 ， 本 书 示例 没有 提供 完整 的 HTML 代 码 ， 读 者 应 该 补充 完整 的 HTML 结 构 ， 然 后 进行 测 
试 练习 ， 或 者 直接 参考 本 书 提供 的 下 载 源 代 码 ， 边 学 边 练 。 

为 了 给 读者 提供 更 多 的 学 习 资 源 ， 本 书 提供 了 很 多 参考 链接 , 许多 本 书 无 法 详细 介绍 的 问题 都 可 
以 通过 这 些 链接 找到 答案 。 由 于 这 些 链接 地 址 会 因 时 间 而 有 所 变动 或 调整 ， 所 以 在 此 说 明 ， 这 些 链 接 
地 址 仅 供 参考 ， 本 书 无 法 保证 所 有 的 这 些 地址 是 长 期 有 效 的 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 《〈 需 要 乔 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 书 
中 的 所 有 线 上 线 下 资源 。 


本 书 所 附 赠 的 超 值 资 源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 (www.tup-com.cn) ， 在 对 应 图 | 


书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ” 二 维 码 ， 获 取 其 下 载 方式 。 

本 书 提供 QQ 群 (668118468、697651657) 、 微 信和 群 (qianduankaifa cn) 、 服 务 网 站 (www.qianduan 
kaifa.cn) 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 答疑 、 技 术 资 讯 、 视 频 课 堂 、 在 线 勘 误 等 功能 。 在 
这 里 ， 您 可 以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 

读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 (qianduanjiaoshi@163.com) 发 邮件 给 我 们 。 


关于 作者 
前 端 科技 是 由 一 群 热爱 Web 开 发 的 青年 骨干 教师 和 一 线 资深 开发 人 员 组 成 的 一 个 团队 , 主要 从 事 











Web 开 发 、 教 学 和 培训 。 参 与 本 书 编写 的 人 员 包 括 咸 建 勋 、 灵 晶 、 文 普 、 李 静 、 钟 世 礼 、 囊 江 、 甘 桂 | 
萍 、 刘 燕 、 杨 凡 、 朱 砚 、 余 乐 、 邹 仲 、 余 洪 平 、 谭 贞 军 、 谢 党 华 、 何 子夜 、 赵 美 青 、 牛 金 告 、 孙 玉 静 、 | 
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多 和 视频 讲解 ，82 分 钟 





























2.3.1 address 一 一 联系 信息 
2.3.2 time 一 一 显示 时 间 a 
2.3.3 figure 和 figcaption 一 一 流 媒体 .….29 
2.3.4 details 和 summary 一 一 详细 内 容 .…29 
2.3.5 ”mark 一 一 记号 文本 .. 





1.3 HTMLS5 语法 特性 
1.3.1 文档 和 标记 
1.3.2 ”宽松 的 约定 





a 2.1 HTML5 元 
a 2.1.1 新 元 素 分 类 . 
“2 2.1.2 废除 的 元 素 . 
了 2.2 设计 新 的 文档 结构 
i 2.2.1 article 一 一 文章 块 
机 2.2.2 section 一 一 区 块 ..…. 
1.1.6 “浏览 器 检测 a 
1.2 HTMLS5 设计 原则 6 3 
1.2.1 避免 不 必要 的 复杂 性 .6 
1.2.2 支持 已 有 内 容 … a Se 
1.2.3 解决 实际 问题 .… a 2.27 hgroup 标题 组 
1.2.4 用 户 怎么 使 用 就 怎么 设计 规范 …...8 RE 
全 2.3 ”设计 新 的 语义 信息 … 
1.2.6 支持 的 优先 级 .9 
et 
.9 
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1.4.1 编写 第 一 个 HTML5 文档 .…………11 2.3.6 progress 进度 条 . 

1.4.2 比较 HTML4 与 HIMLS 237 meter 大王 
Ns » 238 dialog 志 对 诞生 

1.4.3 ”设计 一 个 较 详细 的 HTML5 239 bdi 隔离 文本 
实 息 入 想 oanoavienmial3 





2.3.10 ”wbr 一 一 换行 断 点 ……… 
2.3.11 rmby、It、 包 一 一 文本 注释 .……… 
2.3.12 ” command 一 一 菜单 命令 .37 
2.4 完善 旧 元 素 .…- 
2.4.1 a 一 一 超 链 接 
2.4.2 ol 一 一 有 序列 表 .… 
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扩展 HTMLElement. 











1.5.5 扩展 DOM HIML 2.43 一 定义 列表 
1.5.6 2.4.4 cite 一 一 引用 文本 . 
1.6 在 线 练习 








2.4.5 small 一 一 小 号 字体 .. 
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2.4.6 ”ifiame 一 一 浮动 框架 . 
2.4.7 script 一 一 脚本 .……. 
HTMLS 新 的 全 局 属性 
2.5.1 contentEditable- 
人 
2.53 
2.5.4 
2.5.5 
2.5.6 

















可 编辑 内 容 .… 
contextmenu 一 一 快捷 菜单 …...…….……… 
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2.6.3 ”特殊 分 节 
案例 实战 
在 线 练习 
HUML5 鹤 弟 issn 
萎 a 视频 讲解 ，49 

下 5 表单 竺 性 :sse 52 
新 的 Input 类 型 
3.2.1 email 一 一 Email 地 址 框 
3.2.2 Wl 一 一 URL 地 址 框 …. 
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3.2.6 search 一 一 搜索 框 ….…… 
3.2.7 tel 一 一 电话 号 码 框 
3.2.8 ”color 一 一 拾 色 器 
新 的 input 属性 .… 
3.3.1 autocomplete 一 一 自动 完成 
3.3.2 autofocus 一 一 自动 获取 焦 
3.3.3 form 归属 表单 
Ek 
3.3.5 height 和 width 一 一 高 和 宽 
3.3.6 list 一 一 列表 选项 .. 
3.3.7 min、max 和 step 一 一 最 小 值 、 
最 大 值 和 步 长 .. 
multiple 一 一 多 选 .. 
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4.1 
4.2 


4.3 


4.4 


3.3.10 placeholder 替换 文本 
3.3.11 required 一 一 必 填 .…………… 
新 的 表单 元 素 …………… 
3.4.1 datalist 一 一 数据 列表 .… 
3.4.2 keygen- -一 密 钥 对 生成 器 
3.4.3 output 一 一 输出 结果 
新 的 form 属性 
3.5.1 autocomplete 一 一 自动 完成 . 
3.5.2 ”novalidate 一 一 禁止 验证 
































3.6.1 设计 HTML5 注册 表单 
3.6.2 设计 HTML5 验证 表单 … 
在 线 练习 


HTML5 绘图 和 动画 ………….…….….…. 76 
多 和 视频 讲解 ，135 分 钟 








绘制 图 形 .. 
4.2.1 拢 形 . 
4.2.2 路 径 . 
4.2.3 直线 . 
4.2.4 辆 弧 
4.2.5 二 次 方 曲线 . 
4.2.6 三 次 方 曲线 . 
定义 样式 和 颜色 . 
4.3.1 颜色 
4.3.2 不 透明 度 . 
433 实 厂 ---- 
4.3.4 ”虚线 …. 
4.3.5 ”线性 渐变 . 
4.3.6 径 向 渐变 . 
4.3.7 图 案 . 
4.3.8 阴影 . 
4.3.9 填充 规则 . 

























保存 和 恢复 状态 .… 
清除 画布 . 
移动 坐标 . 
旋转 坐标 . 
缩放 图 形 . 
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图 形 合成 … 
4.5.1 合成 .. i 
es 
绘制 文本 .… 
4.6.1 填充 文字 
4.6.2 轮廓 文字 
4.6.3 文本 样式 
4.6.4 测量 宽度 
使 用 图 像 … 
4.7.1 导入 图 像 
4.7.2 缩放 图 像 
4.7.3 载 切 图 像 … 
























认识 ImageData 对 象 
创建 图 像 数据 
将 图 像 数据 写 入 画布 .… 
在 画布 中 复制 图 像 数据 
485 保存 国 片 -= 
Path2D 对 象 
4.9.1 Canvas 2D API 新 功能 . 
4.9.2 使 用 Path2D 对 象 . 








4.10.1 
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缩放 图 像 和 反 锯齿 处 理 . 
4.10.5 设计 运动 动画 
4.10.6 设计 地 球 和 月 球 公转 动画 .. 

在 线 练习 . 
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9.1.2 位 置信 息 来 源 11.5 FileSystem API 
9.1.3 位置 信息 表示 11.5.1 认识 FileSystem API k 
9.1.4 获取 位 置信 息 .… 11.5.2 访问 FileSystem.…243 
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9.1.6 11.5.4 

9 11.5.5 

9.1.8 11.5.6 

9.1.9 11.5.7 

9.1.10 使 用 position 212 11.5.8 

9.2 案例: 设计 位 置地 图 11.5.9 

9.3 在 线 练习 11.5.10 

| 第 10 章 历史 记录 ... i 5.M 
二 视频 j 26 11.5.12 
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10.1.1 了 解 History API. 217 11.5.14 
10.1.2 使 用 History API. lB 11.5.15 使 用 filesystem:URL 
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12.1 跨 文档 消息 传递 
12.1.1 postMessage 基础 .… 
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12.1.3 案例 : 设计 跨 域 动态 对 话 .… 
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12.2.2 使 用 WebSockets API. 
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12.2.8 案例: 推送 信息 .291 
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第 13 章 WebRTC 视频 直播 
13.1 WebRTC 基础 
13.2 ”案例 实战 
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13.2.2 
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14.1.1 Notification API 基础 . 
14.1.2 案例 : 设计 桌面 通知 . 
14.1.3 案例: 关闭 通知 .… 
14.1.4 案例: 设计 多 条 通知 .318 
14.2 页 面 可 见 API 
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14.2.2 ”案例 : 设计 视频 页 面 . 
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14.3.3 案例 : 设计 全 屏 播放 . 
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15.1.1 拖 放 功 能 实现 
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铬 和 视频 讲解 : 21 分 钟 
25.1 媒体 查询 基础 
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HTML5 基础 


2014 年 10 月 28 日 ，W3C 的 HTML 工作 组 发 布 了 HTMLS 的 正式 推荐 标准 。HTML5 
是 构建 开放 Web 平台 的 核心 ， 是 万 维 网 的 核心 语言 一 可 扩展 标记 语言 的 第 5 版 。 在 这 一 
版 本 中 ,增加 了 支持 Web 应 用 的 许多 新 将 性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重 
点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 浏览 器 中 的 互 操作 性 。 

本 章 将 对 HTMLS 进行 简单 概述 ， 对 于 继承 自 HIML4 的 大 部 分 内 容 就 不 再 部 述 ， 有 关 
HTML5 API 部 分 将 在 后 面 各 章 中 逐步 展开 讲解 。 


权威 参 者 : https://www.w3.org/TR/html5/ 


【 学 习 重 点 】 


| 


至 至 至 





了 解 HTML 版 本 和 HIMLS 开发 历史 。 
了 解 HTMLS5 设计 理念 。 

了 解 HIML5 API。 

熟悉 HTML5 基本 语法 。 





1 


0 


HTMLS5 概述 


| 从 2010 年 开始 ，HTML5 和 CSS3 就 一 直 是 网 络 世 界 倍 受 追 捧 的 技术 热点 。 以 HTML5+CSS3 为 


主 的 网 络 时 代 ， 使 互联 网 进入 了 一 个 革新 的 发 展 阶段 。 


| 1.1.1 HTML 版 本 概览 








| 

| 

| 

| 版 本 发 布 日 期 
| ” 超 文 本 标记 语言 

| (第 -版 ) 1993 年 6 月 

| 

| HTML2.0 1995 年 11 上 月 

| _HIML32 1996 年 1 月 14 日 
| _HTML40 1997 年 12 月 18 日 
| _HTML401 1999 年 12 月 24 日 
| 

| ISOHIML 2000 年 5 月 15 日 
| 

| _XHIML10 2000 年 1 月 26 日 
| _XHTML11 2001 年 5 月 31 晶 
| _XHIML20 草 案 没有 发 布 

| HTML5 草案 2008 年 1 月 

| _HIML5.1 2017 年 10 月 3 日 
| _HIML52 2017 年 12 月 14 日 
| _HIML53 2018 年 3 月 15 日 
| 

| 

| 

| 


1.1.2 ”HTML5 诞生 记 


HTML 从 诞生 至 今 ， 经 历 了 近 30 年 的 发 展 ， 其 中 经 历 的 版 本 及 发 布 日 期 如 表 1.1 所 示 。 
表 1.1 HTML 语言 的 发 展 过 程 


说 明 
作为 互联 网 工程 工作 小 组 〈IETF) 工作 草案 发 布 ， 非 标准 


作为 RFC 1866 发 布 ,在 RFC 2854 于 2000 年 6 月 发 布 之 后 被 宣布 
已 经 过 时 

W3C 推荐 标准 

W3C 推荐 标准 

微小 改进 ，W3C 推荐 标准 

基于 严格 的 HTML4.01 语法 ， 是 国际 标准 化 组 织 和 国际 电工 委员 
会 的 标准 

W3C 推荐 标准 ， 修 订 后 于 2002 年 8 月 1 日 重新 发 布 

较 1.0 有 微小 改进 

2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 

HTML5 规范 先是 以 草案 发 布 ， 经 历 了 漫长 的 过 程 

W3C 发 布 HTML5 第 1 个 更 新 版 本 (http://www.w3.org/TR/html51/) 
W3C 发 布 HTML5 第 2 个 更 新 版 本 (http://www.w3.org/TR/html52/) 
W3C 发布 HTML5 第 3 个 更 新 版 本 (http://www.w3.org/TR/html53/) 


这 提示 : 从 上 面 HTML 发 展 列表 来 看 ，HTML 没有 1.0 版 本 ， 这 主要 是 因为 当时 有 很 多 不 同 的 版 
本 。 有些 人 认为 Tim Berners-Lee 的 版 本 应 该 算 初版 ， 其 版 本 中 还 没有 img 元素， 也 就 是 
说 ，HTML 刚 开始 仅 能 够 显示 文本 信息 。 


在 20 世纪 末期 ，W3C 开始 琢磨 着 改良 HTML 语言 ， 当 时 的 版 本 是 HTML4.01。 但 是 在 后 来 的 开 
发 和 维护 过 程 中 ， 出 现 了 方向 性 分 歧 : 是 开发 XHTML 1， 再 到 XHTML 2， 最 后 终极 目标 是 XML; 


| 还 是 坚持 实用 主义 原则 ， 快 速 开发 出 改良 的 HTML5 版 本 ? 





2004 年 W3C 成 员 内 部 的 一 次 研讨 会 上 ， 当 时 Opera 公司 的 代表 伊 恩 。 希 克 森 (Ian Hickson) 提 
出 了 一 个 扩展 和 改进 HIML 的 建议 。 他 建议 新 任务 组 可 以 跟 XHTML 2 并 行 ， 但 是 在 已 有 HIML 的 
基础 上 开展 工作 ， 目 标 是 对 HTML 进行 扩展 。 但 是 W3C 投票 表示 反对 ， 因 为 他 们 认为 HTML 已 经 
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毫 无 前 景 ，XHTML 2 才 是 未 来 的 方向 。 | 

然后 ，Opera、Apple 等 浏览 器 厂商 ， 以 及 部 分 成 员 忍 受 不 了 W3C 的 工作 机 制 和 拖 杏 的 行事 节奏 ，| 
决定 脱离 W3C, 他 们 成 立 了 WHATWG (Web Hypertext Applications Technology Working Group, Web | 
超 文 本 应 用 技术 工作 组 )， 这 就 为 HTMLS5 将 来 的 命运 埋 下 了 伏笔 。 | 

WHATWG 决定 完全 脱离 W3C， 在 HTML 的 基础 上 开展 工作 ， 向 其 中 添加 一 些 新 东西 。 这 个 工 | 
作 组 的 成 员 里 有 浏览 器 厂商 ， 因 此 他 们 可 以 保证 实现 各 种 新 奇 、 实 用 的 点 子 。 结 果 ， 大 家 不 断 提出 一 
些 好 点 子 ， 并 且 逐 一 整合 到 新 版 本 浏览 器 中 。 | 

WHATWG 的 工作 效率 很 高 ， 不 久 就 初 见 成 效 。 在 此 期 间 ，W3C 的 XHTML 2 没有 什么 实质 性 的 
进展 。 在 2006 年 ， 蒂 姆 。 伯 纳 斯 - 李 写 了 一 篇 博客 反思 HTML 发 展 历史 :“ 你 们 知道 吗 ? 我 们 错 了 。 
我 们 错 在 企图 一 夜 之 间 就 让 Web 跨 入 XML 时 代 , 我 们 的 想法 太 不 切实 际 了 , 是 的 ， 也 许 我 们 应 该 重 
新 组 建 HTML 工作 组 了 。” 

W3C 在 2007 年 组 建 了 HTML5 工作 组 。 这 个 工作 组 面临 的 第 一 个 问题 是 “我 们 是 从 头 开始 做 起 | 
呢 ， 还 是 在 2004 年 成 立 的 那个 叫 WHATWG 的 工作 组 既 有 成 果 的 基础 上 开始 工作 呢 ? ” 

答案 是 显而易见 的 ， 他 们 当然 希望 从 已 经 取得 的 成 果 着 手 ， 以 此 为 基础 开展 工作 。 工 作 组 投了 一 | 
次 票 ， 同 意 在 WHATWG 工作 成 果 的 基础 上 继续 开展 工作 。 | 

第 二 个 问题 就 是 如 何 理 顺 两 个 工作 组 之 间 的 关系 。W3C 这 个 工作 组 的 编辑 应 该 由 谁 担任 ? 是 不 
是 还 让 WHATWG 的 编辑 ， 也 就 是 现在 Google 的 伊 恩 。 希 克 森 来 兼任 ? 于 是 他 们 又 投了 一 次 票 ， 赞 
成 让 伊 恩 。 和 希 克 森 担任 W3C HTMLS5 规范 的 编辑 ， 同 时 兼任 WHATWG 的 编辑 ， 更 有 助 于 新 工作 组 
开展 工作 。 

这 就 是 他 们 投票 的 结果 ， 也 就 是 我 们 今天 看 到 的 局 面 : 一 种 格式 ， 两 个 版 本 。WHATWG 网 站 上 
有 这 个 规范 ， 而 W3C 网 站 上 同样 也 有 一 份 。 

如 果 不 了 解 内 情 ， 你 很 可 能 会 产生 这 样 的 疑问 :“ 哪 个 版 本 才 是 真正 的 规范 ? ”当然 ， 这 两 个 版 
本 内 容 是 一 样 的 ， 基 本 上 相同 。 实 际 上 ， 这 两 个 版 本 将 来 还 会 分 道 扬 镀 。 现 在 已 经 有 了 分 道 扬 镀 的 迹 
象 。W3C 最 终 要 制定 一 个 具体 的 规范 ， 这 个 规范 会 成 为 一 个 工作 草案 ， 定 格 在 某 个 历史 时 刻 。 

而 WHATWG 还 在 不 断 地 和 迭代。 即使 目前 的 HTMLS5 也 不 能 完全 涵盖 WHATWG 正在 从 事 的 工作 。 
最 准确 的 理解 就 是 WHATWG 正在 开发 一 项 简单 的 HTML 或 Web 技术 ， 因 为 这 才 是 他 们 工作 的 核心 
目标 。 然 而 ， 同 时 存在 两 个 这 样 的 工作 组 ， 这 两 个 工作 组 同时 开发 一 个 基本 相同 的 规范 ， 这 无 论 如 何 
也 容易 让 人 产生 误解 ， 误 解 就 可 能 造成 麻烦 。 

其 实 这 两 个 工作 组 背后 各 自 有 各 自 的 流程 ， 因 为 它们 的 理念 完全 不 同 。 在 WHATWG 内 部 , 可 以 | 
说 是 一 种 独裁 的 工作 机 制 。 伊 恩 ， 希 克 森 是 编辑 。 他 会 听取 各 方 意见 ， 在 所 有 成 员 各 抒 己见 ， 充 分 陈 | 
述 自 己 的 观点 之 后 ， 他 批准 自己 认为 正确 的 意见 。 而 W3C 则 截然 相反 ， 可 以 说 是 一 种 民主 的 工作 机 
制 。 所 有 成 员 都 可 以 发 表意 见 ， 而 且 每 个 人 都 有 投票 表决 的 权利 。 这 个 流程 的 关键 在 于 投票 表决 。 从 
表面 上 看 ，WHATWG 的 工作 机 制 让 人 难以 接受 ，W3C 的 工作 机 制 听 起 来 让 人 很 舒服 ， 至 少 体现 了 
人 人 平等 的 精神 。 但 在 实践 中 ，WHATWG 的 工作 机 制 运 行 得 非常 好 。 这 主要 归功 于 伊 恩 。 希 克 森 。 
他 在 听取 各 方 意见 时 ， 始 终 可 以 做 到 丝毫 不 带 个 人 感情 色彩 。 

从 原理 上 讲 ，W3C 的 工作 机 制 很 公平 ， 而 实际 上 却 非常 容易 在 某 些 流程 或 环节 上 卡 壳 ， 造 成 工 | 
作 停 沾 不 前 ， 一 件 事情 要 达成 决议 往往 需要 花费 很 长 时 间 。 屠 到底 哪 种 工作 机 制 最 好 呢 ? 个 人 认为 ，| 
最 好 的 工作 机 制 是 将 二 者 结合 起 来 。 而 事实 也 是 两 个 规范 制定 主体 在 共同 制定 一 份 相同 的 规范 , 这 倒 | 
是 非常 有 利于 两 种 工作 机 制 相 互 取长补短 。 | 

两 个 工作 组 之 所 以 能 够 同心 同 德 ， 主 要 原因 是 HTMLS5 的 设计 思想 。 因 为 从 一 开始 就 确定 了 设计 | 
HIMLS 所 要 坚持 的 原则 。 结 果 ， 我 们 不 仅 看 到 了 一 份 规范 ， 也 就 是 W3C 站 点 上 公布 的 那 份 文档 ， 
即 HTML5 语言 规范 ， 还 在 W3C 站 点 上 看 到 了 另 一 份 文档 ， 也 就 是 HIML5 设计 原理 。 
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1.1.3 HTML5 组 织 


HTML5 是 W3C 与 WHATWG 合作 的 结晶 。HTML5 开发 主要 由 下 面 三 个 组 织 负责 。 
WHATWG: 由 来 自 Apple、Mozilla、Google、Opera 等 浏览 器 厂商 的 专家 组 成 ， 成立 于 2004 
年 。WHATWG 负责 开发 HTML 和 Web 应 用 API。 

W3C: 指 World Wide Web Consortium， 万 维 网 联盟 ， 负 责 发 布 HTMLS5 规范 。 

IETF (因特网 工程 任务 组 ): 负责 Internet 协议 开发 。HTMLS 定义 的 WebSocket API 依赖 
于 新 的 WebSocket 协议 ，IETF 工作 组 负责 开发 这 个 协议 。 


1.1.4 HTMLS 开发 规则 


为 了 避免 HTMLS5 开发 过 程 中 出 现 的 各 种 分 歧 和 偏差 HTMLS5 开发 工作 组 在 共识 基础 上 建立 了 
一 套 行事 规则 : 
新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。 
减少 对 外 部 插件 的 依赖 ， 如 Flash。 
更 优秀 的 错误 处 理 。 
更 多 取代 脚本 的 标记 。 
HTML5 应 该 独立 于 设备 。 
开发 进程 应 即时 、 透 明 ， 倾 听 技术 社区 的 声音 ， 吸 纳 社区 内 优秀 的 Web 应 用 。 
允许 试 错 ， 允 许 纠偏 ， 从 实践 中 来 ， 服 务 于 实践 ， 快 速 迁 代 。 


1.1.5 HTML5 特性 


下 面 简单 介绍 HTML5 特性 和 优势 ， 以 便 增强 读者 自学 HTML5 的 动力 和 明确 目标 。 

1. 兼容 性 

考虑 到 互联 网 上 HIML 文档 已 经 存在 20 多 年 了 ， 因 此 支持 所 有 现存 HTML 文档 是 非常 重要 的 。 
HTMLS5 不 是 颠覆 性 的 革新 ， 它 的 核心 理念 就 是 要 保持 与 过 去 技术 的 兼容 和 过 渡 。 一 旦 浏览 器 不 支持 
HIML5 的 某 项 功能 ， 针 对 该 功能 的 备 选 行为 就 会 悄悄 运行 。 

2. 实用 性 

HITMLS 新 增加 的 元 素 都 是 对 现 有 网 页 和 用 户 习 惯 进行 跟踪 、 分 析 和 概括 而 推出 的 。 例如 , Google 
分 析 了 上 百 万 的 页 面 ， 从 中 分 析出 了 DIV 标签 的 通用 ID 名称 ， 并 且 发 现 其 重复 量 很 大 ， 如 很 多 开发 
人 员 使 用 <div id="header"> 来 标记 页 眉 区 域 ,为 了 解决 实际 问题 HTMLS5 就 直接 添加 一 个 <header> 标 
签 。 也 就 是 说 ，HTML5 新 增 的 很 多 元 素 、 属 性 或 者 功能 都 是 根据 现实 互联 网 中 已 经 存在 的 各 种 应 用 
进行 归纳 和 提炼 ， 而 不 是 在 实验 室 中 进行 理想 化 的 虚构 新 功能 。 

3. 效率 

HTML5 规范 是 基于 用 户 优先 的 原则 编写 的 ， 其 宗旨 是 用 户 即 上 帝 ， 这 意味 着 在 遇 到 无 法 解决 的 
冲突 时 ， 规 范 会 把 用 户 放 到 第 一 位 ， 其 次 是 页 面 制作 者 ， 再 次 是 浏览 器 解析 标准 ， 接 着 是 规范 制定 者 
(如 W3C、WHATWG)， 最 后 才 考虑 理论 的 纯粹 性 。 因 此 ，HTMLS 的 绝 大 部 分 是 实用 的 ， 只 是 有 些 
博 况 下 还 不 够 完美 。 例 如 ， 下 面 的 几 种 代码 写法 在 HIML5 中 都 能 被 识别 。 


jd"prohtml5" 


加 回 
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id-prohtml5 
ID="prohtmls" | 
当然 ， 上 面 几 种 写法 比较 混乱 ， 不 够 严谨 ， 但 是 从 用 户 开发 角度 考虑 ， 用 户 不 在 乎 代码 怎么 写 ，| 
根据 个 人 书写 习惯 反而 提高 了 代码 编写 效率 。 | 
4. 安全 性 | 
为 保证 足够 安全 ，HTML5 引入 了 一 种 新 的 基于 来 源 的 安全 模型 ， 该 模型 不 仅 易 用 ， 而 且 对 各 种 ! 
不 同 的 API 都 通用 。 这 个 安全 模型 可 以 不 需要 借助 于 任何 所 谓 聪明 、 有 创意 却 不 安全 的 hack 就 能 跨 
域 进行 安全 对 话 。 | 
5. 分 离 


在 清晰 分 离 表现 与 内 容 方面 , HTML5 迈 出 了 很 大 的 步伐 。 HTMLS 在 所 有 可 能 的 地 方 都 努力 进行 | 

了 分 离 ， 包 括 HTML 和 CSS。 实 际 上 ，HTMLS 规范 已 经 不 支持 老 版 本 HTML 的 大 部 分 表现 功能 了 。 | 

6. 简化 

HTML5 要 的 就 是 简单 、 避 人 免 不 必要 的 复杂 性 。HTML5 的 口号 是 : 简单 至 上 ， 尽 可 能 简化 。 因 | 

HTML5 做 了 以 下 改进 : 

以 浏览 器 原生 能 力 蔡 代 复 杂 的 JavaScript 代码 。 

简化 的 DOCTYPE。 

简化 的 字符 集 声明 。 

简单 而 强大 的 HIML5 API。 

7. 通用 性 

通用 访问 的 原则 可 以 分 成 三 个 概念 : 

可 访问 性 : 出 于 对 残障 用 户 的 考虑 ，HITML5 与 WAI (Web 可 访问 性 倡议 ) 和 ARIA (可 访 
问 的 富 Intemet 应 用 ) 做 到 了 紧密 结合 ，WAI-ARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添 
加 到 HTML 中 。 

媒体 中 立 : 如 果 可 能 的 话 ，HTMLS 的 功能 在 所 有 不 同 的 设备 和 平台 上 应 该 都 能 正常 运行 。 

回 ”支持 所 有 语种 : 如 新 的 <ruby> 元 素 支持 在 东亚 页 面 排版 中 会 用 到 的 Ruby 注释 。 

8. 无 插件 | 

在 传统 Web 应 用 中 ， 很 多 功能 只 能 通过 插件 或 者 复杂 的 hack 来 实现 ， 但 在 HIML5 中 提供 了 对 | 

这 些 功 能 的 原生 支持 。 插 件 的 方式 存在 很 多 问题 : 

回 ”插件 安装 可 能 失败 。 

回 ”插件 可 以 被 禁用 或 屏蔽 ， 如 Flash 插件 。 

回 ”插件 自身 会 成 为 被 攻击 的 对 象 。 

因为 插件 边界 、 剪 裁 和 透明 度 问题 ， 插 件 不 容易 与 HTML 文档 的 其 他 部 分 集成 。 

以 HTML5 中 的 canvas 元 素 为 例 ， 有 很 多 非常 底层 的 事情 以 前 是 没 办 法 做 到 的 ， 如 在 HTML4 的 

页 面 中 就 难 画 出 对 角 线 ， 而 有 了 canvas 就 可 以 很 轻易 地 实现 了 。 基 于 HTML5 的 各 类 API 的 优秀 设 | 

计 ， 可 以 轻松 地 对 它们 进行 组 合 应 用 。 例 如 ， 从 video 元 素 中 抓 取 的 帧 可 以 显示 在 canvas 里 面 ， 用 户 | 

单 击 canvas 即 可 播放 这 帧 对 应 的 视频 文件 。 

最 后 ,用 万 维 网 联盟 创始 人 蒂 姆 。 伯 纳 斯 - 李 的 评论 来 小 结 , “今天 ,我 们 想 做 的 事情 已 经 不 再 是 
通过 浏览 器 观看 视频 或 收听 音频 ,或 者 在 一 部 手机 上 运行 浏览 器 。 我 们 希望 通过 不 同 的 设备 ,在 任何 
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地 方 ， 都 能 够 共享 照片 、 网 上 购物 、 阅 读 新 闻 以 及 查找 信息 。 虽 然 大 多 数 用 户 对 HIML5 和 开放 Web 
平台 (Open Web Platform，OWP) 并 不 熟悉 ， 但 是 它们 正在 不 断 改 进 用 户 体验 ”。 


1.1.6 浏览 器 检测 


HTMLS 发 展 的 速度 非常 快 ， 因 此 不 用 担心 浏览 器 的 支持 问题 。 用 户 可 以 访问 www.caniuse.com， 
该 网 站 按照 浏览 器 的 版 本 提供 了 详尽 的 HTMLS5 功能 支持 情况 。 

如 果 通 过 浏览 器 访问 www.html5test.com, 该 网 站 会 直接 显示 用 户 浏览 器 对 HTML5 规范 的 支持 情 
况 。 另 外 , 还 可 以 使 用 Modernizr (JavaScript 库 ) 进行 特性 检测 , 它 提供 了 非常 先进 的 HTML5 和 CSS3 
检测 功能 。 建 议 使 用 Modernizr 检测 当前 浏览 器 是 否 支持 某 些 特性 。 





1.2 HTML5 设计 原则 


从 HTML 2.0 到 XHTML 2.0，XHTML 2.0 由 于 语法 解析 过 于 严格 ， 因 此 不 太 适 合 互联 网 开放 、 
自由 的 精神 。Jeremy Keith 认为 所 有 的 项 目 都 应 该 先 有 设计 原则 ，HTMLS5 也 同样 如 此 ，W3C 为 此 发 
布 了 HTML 设计 原则 (http://www.w3.org/TR/html-design-principles/)， 强 调 了 HTMLS5 规范 的 兼容 性 、 
实用 性 和 互 操 作 性 。 

1.2.1 避免 不 必要 的 复杂 性 

规范 可 以 写 得 十 分 复杂 ， 但 浏览 器 的 实现 应 该 非常 简单 。 把 复杂 的 工作 留 给 浏览 器 后 台 去 处 理 ， 
用 户 仅 需要 输入 简单 的 字符 ， 甚 至 不 需要 输入 ， 才 是 最 佳 文档 规范 。 因 此 ，HIMLS 首先 采用 化 繁 为 
简 的 思路 进行 设计 。 

【示例 1】 在 HTML4.01 中 定义 文档 类 型 的 代码 如 下 : 

<!DOCTYPE html PUBLIC "-/W3C/DTD HTMLA.01/EN" "http://www.w3.org/TR/html4/strict.dtd"> 

HTMLS5 简化 如 下 : 

<!IDOCTYPE html> 

HTMIL4.01 和 XHTML 中 的 DOCTYPE 过 于 元 长 ， 连 自己 都 记 不 住 这 些 内 容 , 但 在 HTML5 中 只 
需要 简单 的 <IDOCTYPE html> 就 可 以 了 。DOCTYPE 是 给 验证 器 用 的 ， 而 非 浏览 器 ， 浏 览 器 只 在 做 
DOCTYPE 切换 时 关注 这 个 标签 ， 因 此 并 不 需要 写 得 太 复杂 。 

【示例 2】 在 HIML4.01 中 定义 字符 编码 的 代码 如 下 : 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8"> 

在 XHTML 1.0 中 还 需要 再 声明 XML 标签 ， 并 在 其 中 指定 字符 编码 。 

<?xml version="1.0" encoding="UTF-8" ?> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

HTMLS5 简化 如 下 : 

<meta charset="utf-8"> 


关于 省 略 不 必要 的 复杂 性 , 或 者 说 避免 不 必要 的 复杂 性 的 例子 还 有 不 少 , 但 关键 是 既 能 避免 不 必 
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要 的 复杂 性 ， 还 不 会 妨碍 在 现 有 浏览 器 中 使 用 。 | 
在 HTML5 中 ， 如 果 使 用 link 元 素 链接 到 一 个 样式 表 ， 先 定义 rel="stylesheet"， 然 后 再 定义 | 
type="text/css"， 这 样 就 重复 了 。 对 浏览 器 而 言 ， 只 要 设置 rel="stylesheet" 就 够 了 ， 因 为 它 可 以 猜 出 
链接 的 是 一 个 CSS 样式 表 ， 没 必要 再 指定 type 属性 。 
对 Web 开发 而 言 ， 大 家 都 使 用 JavaScript 脚本 语言 ， 也 是 默认 的 通用 语言 ， 用 户 可 以 为 script 元 | 
素 定义 type="textjavascript" 属 性 ， 也 可 以 什么 都 不 写 ， 浏 览 器 自然 会 假设 在 使 用 JavaScript。 


1.2.2 支持 已 有 内 容 | 


XHTML 2.0 最 大 的 问题 就 是 不 支持 已 经 存在 的 内 容 ， 这 违反 了 Postel 法 则 〈 即 对 自己 发 送 的 东 | 
西 要 严格 ， 对 接收 的 东西 则 要 宽容 )。 现 实情 况 中 ， 开 发 者 可 以 写 出 各 种 风格 的 HTML， 浏 览 器 遇 到 | 
这 些 代 码 时 ， 在 内 部 所 构建 出 的 结构 应 该 是 一 样 的 ， 呈 现 的 效果 也 应 该 是 一 样 的 。 

【示例 】 下 面 示例 展示 了 编写 同样 内 容 的 四 种 不 同 写法 ， 四 种 写法 唯一 的 不 同 点 就 是 语法 。 

<img src="foo" alt="bar" /> 

<p class="foo">Hello world</p> 











<img src="foo" alt="bar"> 
<p class="foo">Hello world 


<IMG SRC="foo" ALT="bar"> 
<P CLASS="foo">Hello world</P> 


<img src=foo alt=bar> 
<p class=foo>Hello world</p> 
从 浏览 器 解析 的 角度 分 析 ， 这 些 写法 实际 上 都 是 一 样 的 。HTML5 必须 支持 已 经 存在 的 约定 ， 适 
应 不 同 的 用 户 习 惯 ， 而 不 是 用 户 适 应 浏览 器 的 严格 解析 标准 。 
1.2.3 ”解决 实际 问题 
规范 应 该 去 解决 现实 中 实际 遇 到 的 问题 ， 而 不 该 考虑 那些 复杂 的 理论 问题 。 
【示例 】 既 然 有 在 <a> 中 英 套 多 个 段落 标签 的 需要 ， 那 就 让 规范 支持 它 。 
这 块 内 容 包 含 一 个 标题 和 一 个 段落 。 按 HIML4 规范 ， 必 须 至 少 使 用 两 个 链接 。 
<h2><a hre 伍 "#'> 标 题 文本 </a></h2> 
<p><a hre 仁 "#"> 段 落 文 本 </a></p> 
在 HTML5 中 ， 只 需要 把 所 有 内 容 都 包 庄 在 一 个 链接 中 就 行 了 。 
<a href="#"> 
<h2> 标 题 文本 </h2> 
<p> 段 落 文 本 </p> 
</a> 


其 实 这 种 写法 早已 经 存在 ， 当 然 以 前 这 样 写 是 不 合乎 规范 的 。 所 以 说 , HTMLS5 解决 现实 的 问题 ， | 
其 本 质 还 是 纠正 因循守旧 的 规范 标准 ， 现 在 把 标准 改 了 ， 人 允许 用 户 这 样 写 了 。 
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1.2.4 用 户 怎么 使 用 就 怎么 设计 规范 
| 
| 当 一 个 实践 已 经 被 广泛 接受 时 ， 就 应 该 考虑 将 它 吸 纳 进来 ， 而 不 是 禁止 它 或 开发 一 个 新 的 实践 。 
全 | 例如 ，HTML5 新 增 了 nav、section、article、aside 等 标签 ， 它 们 引入 了 新 的 文档 模型 ， 即 文档 中 的 文 
~ | 档 。 在 section 中 ， 还 可 以 嵌 套 hl 到 h6 的 标签 ， 这 样 就 有 了 无 限 的 标题 层级 ， 这 也 是 很 早 之 前 Tim 
Berners Lee 所 设想 的 。 
| 【示例 】 下 面 几 行 代码 相信 大 家 都 不 会 陌生 ， 这 些 都 是 频繁 被 使 用 过 的 ID 名 称 。 
| divid="header">...</div> 
| <div id="navigation">...</div> 
| <div id="main">...</div> 
| <div id="aside">...</div> 
| <div id="footer">...</div> 
| 
| 在 HTML5 中 ， 可 以 用 新 的 元 素 代 蔡 使 用 。 
| <header>..</header> 
| <nav>...</nav> 
| <div id="main">...</div> 
| <aside>...</aside> 
| <footer>...</footer> 
| 
| 


实际 上 ， 这 并 不 是 HTMLS5 工作 组 想 出 来 的 ， 也 不 是 W3C 提出 来 的 ， 而 是 谷歌 根据 大 数据 分 析 
用 户 习 惯 得 出 来 的 。 


| 12.5 “优雅 地 降级 


渐进 增强 的 另 一 面 就 是 优雅 地 回 退 。 最 典型 的 例子 就 是 使 用 type 属性 增强 表单 。 

【示例 1】 下 面 代码 列 出 了 可 以 为 type 属性 指定 的 新 值 ， 如 number、search、range 等 。 
<input type="number" /> 
<input type="search" /> 
<input type="range" /> 
<input type="email" /> 
<input type="date" /> 
<input type="url" /> 
| 最 关键 的 问题 在 于 : 当 浏览 器 看 到 这 些 新 type 值 时 会 如 何 处 理 。 老 版 本 浏览 器 是 无 法 理解 这 些 
| 新 type 值 的 。 但 是 当 它 们 看 到 自己 不 理解 的 type 值 时 ， 会 将 type 的 值 解释 为 text。 
| 【示例 2】 对 于 新 的 video 元 素 ， 它 设计 得 很 简单 、 实 用 。 针 对 不 支持 video 元 素 的 浏览 器 可 以 
| 这 样 写 。 
| 
| <video src="movie mp4"> 
| <!-- 回 退 内 容 -> 
</video> 

这 样 HTML5 视频 与 Flash 视频 就 可 以 协同 起 来 ， 用 户 不 用 纠结 如 何 选择 。 
<video src="movie.mp4"> 

<object data="movie swf'> 


& 
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<!- 回 退 内 容 -> 
</object> 
</video> 
如 果 愿 意 的 话 ， 还 可 以 使 用 source 元 素 ， 而 非 sre 属性 来 指定 不 同 的 视频 格式 。 
<video> 
<source src="movie.mp4"> 
<source src="movie.ogv"> | 
<object data="movie.swf"> | 
<a hre 全 "movie mp4">download</a> ! 
‘</object> 
</video> 
上 面 代码 包含 了 4 个 不 同 的 层次 。 
回 ” 如 果 浏 览 器 支持 video 元 素 ， 也 支持 H264， 没 什么 好 说 的 ， 用 第 一 个 视频 。 
如 果 浏 览 器 支持 video 元 素 ， 支 持 Ogg， 那 么 用 第 二 个 视频 。 
回 ”如 果 浏 览 器 不 支持 video 元 素 ， 那 么 就 要 试 试 Flash 视频 。 
加 ”如 果 浏 览 器 不 支持 video 元 素 ， 也 不 支持 Flash 视频 ， 还 可 以 给 出 下 载 链接 。 
总 之 ,无论 是 HIML5， 还 是 Flash， 一 个 也 不 能 少 。 如 果 只 使 用 video 元 素 提供 视频 ， 难 免 会 遇 
到 问题 。 而 如 果 只 提供 Flash 影片 ， 性 质 是 一 样 的 。 所 以 还 是 应 该 两 者 兼顾 。 


1.2.6 支持 的 优先 级 


用 户 与 开发 者 的 重要 性 要 远 远 高 于 规范 和 理论 。 在 考虑 优先 级 时 ， 应 该 按照 下 面 顺序 : 
用 户 > 编写 HTML 的 开发 者 > 浏览 器 厂商 > 规范 制定 者 > 理论 

这 个 设计 原则 本 质 上 是 一 种 解决 冲突 的 机 制 。 例 如 ， 当 面临 一 个 要 解决 的 问题 时 ， 如 果 W3C 给 
出 了 一 种 解决 方案 ,而 WHATWG 给 出 了 另 一 种 解决 方案 。 一 旦 遇 到 冲突 ， 最 终 用 户 优先 ， 其 次 是 作 
者 ， 再 是 实现 者 ， 然 后 标准 制定 者 ， 最 后 才 是 理论 上 的 完美 。 

根据 最 终 用 户 优先 的 原理 ,开发 人 员 在 链条 中 的 位 置 高 于 实现 者 , 假如 我 们 发 现 了 规范 中 的 某 些 
地 方 有 问题 ， 就 不 支持 实现 这 个 特性 ， 那 么 就 等 于 把 相应 的 特性 给 否定 了 ， 规 范 里 就 得 删除 ， 因 为 用 
户 有 更 高 的 权重 。 本 质 上 用 户 拥有 了 更 大 的 发 言 权 ， 开 发 人 员 也 拥有 更 多 的 主动 性 。 








1.3 HTMLS5 语法 特性 


HTML5 以 HTML4 为 基础 ， 对 HIML4 进行 了 全 面 升级 改造 。 与 HTML4 相 比 ，HTML5 在 语法 | 
上 有 很 大 的 变化 ， 具 体 比 较 如 下 : 
1.3.1 文档 和 标记 

1. 内 容 类 型 


HTMLS5 的 文件 扩展 名 和 内 容 类 型 保持 不 变 。 例如， 扩展 名 仍然 为 “.html” 或 “.htm”， 内 容 类 型 
(ContentType) 仍然 为 “text/html”。 
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2. 文档 类 型 
在 HIML4 中 ,文档 类 型 的 声明 方法 如 下 : 


大 | <IDOCTYPE html PUBLIC "-/W3C/DID XHTML 1.0 Transitional/EN" "http://www.w3.0rg/TR/xhtmll/DTD/ 
对 | | xhtmll-transitional.dtd"> 


在 HTML5 中 ,文档 类 型 的 声明 方法 如 下 : 
| <IDOCTYPE html> 
当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 中 加 入 SYSTEM 识别 符 ， 声 明 方法 如 下 : 


<!DOCTYPE HIML SYSTEM "about:legacy-compat"> 
在 HTML5 中 ，DOCTYPE 声明 方式 是 不 区 分 大 小 写 的 ， 引 号 也 不 区 分 是 单 引号 还 是 双 引 号 。 


”全 注意 : 使 用 HTML5 的 DOCTYPE 会 触发 浏览 器 以 标准 模式 显示 页 面 。 众所周知 ， 网 页 都 有 多 种 
| 显示 模式 ， 如 怪异 模式 (Quirks ) 、 标 准 模式 ( Standards ) 。 浏 览 器 根据 DOCTYPE 来 识 





别 该 使 用 哪 种 解析 模式 。 


| 

| 

| 

| 

| 

| 3. 字符 编码 

| 在 HTML4 中 ， 使 用 meta 元 素 定义 文档 的 字符 编码 ， 如 下 所 示 : 

<meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> 

| 在 HTML5 中 ， 继 续 沿用 meta 元 素 定义 文档 的 字符 编码 ， 但 是 简化 了 charset 属性 的 写法 ， 如 下 
| 所 示 : 

| <meta charset="UTF-8"> 

| 对 于 HTMLS 来 说 ， 上 述 两 种 方法 都 有 效 ， 用 户 可 以 继续 使 用 前 面 一 种 方式 ， 即 通过 content 元 
| 素 的 属性 来 指定 。 但 是 不 能 同时 混用 两 种 方式 。 

， 40 注意 ;在 传统 网 站 中 ， 可 能 会 存在 下 面 的 标记 .在 HTMLS 中 ， 这 种 字符 编码 方式 将 被 认为 是 铺 
charset="UTF-8" http-equiv="Content-Type" content="text/html:charset=UTF-8"> 

从 HTMLS 开始 ， 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 

| 


| 1.3.2 宽松 的 约定 


HTMLS5 语法 是 为 了 保证 与 之 前 的 HTML4 语法 达到 最 大 限度 的 兼容 而 设计 的 。 

1. 标记 省 略 

在 HIML5 中 ， 元 素 的 标记 可 以 分 为 三 种 类 型 : 不 允许 写 结 束 标记 ， 可 以 省 略 结束 标记 ， 开 始 标 
记 和 结束 标记 全 部 可 以 省 略 。 下 面 简 单 介绍 这 三 种 类 型 各 包括 哪些 HIMLS 新 元 素 。 

第 一 ， 不 允许 写 结束 标记 的 元 素 有 : area、base、br、col、command、embed、hr、img、input、 
keygen、 link、 meta、 param、 source、track、wbr。 

第 二 ， 可 以 省 略 结束 标记 的 元 素 有 : li、dt、dd、p、rt、1p、optgroup、option、colgroup、thead、 
tbody、ttoot、tr、td、 了 也。 
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第 三 ， 可 以 省 略 全 部 标记 的 元 素 有 : html、head、body、colgroup、tbody。 


疱 提示 : 不 允许 写 结束 标记 的 元 素 是 指 ， 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 | 
允许 使 用 < 元 素 /> 的 形式 进行 书写 。 例 如 : | 
回 错误 的 书写 方式 
<br></br> 
加 正确 的 书写 方式 
<br> | 
HTML5 之 前 的 版 本 中 <br> 这 种 写法 可 以 继续 沿用 。 | 
可 以 省 略 全 部 标记 的 元 素 是 指 元 素 可 以 完全 被 省 略 。 注 意 ， 该 元 素 还 是 以 隐 式 的 方式 存在 的 。 例 | 
如 ， 将 body 元 素 省 略 时 ， 它 在 文档 结构 中 还 是 存在 的 ， 可 以 使 用 document.body 进行 访问 。 
2. 布尔 值 
对 于 布尔 型 属性 ， 如 disabled 与 readonly 等 ， 当 只 写 属性 而 不 指定 属性 值 时 ， 表 示 属 性 值 为 true; 
如 果 属 性 值 为 false， 可 以 不 使 用 该 属性 。 另 外 ， 要 想 将 属性 值 设 定 为 tue， 也 可 以 将 属性 名 设 定 为 属 
性 值 ， 或 将 空 字符 串 设 定 为 属性 值 。 
【示例 1】 下 面 是 几 种 正确 的 书写 方法 : 
<L- 只 写 属性 ， 不 写 属性 值 ， 代 表 属性 为 true--> | 
<input type="checkbox" checked> | 
| 








<!-- 不 写 属性 ， 代 表 属 性 为 false--> 

<input type="checkbox"> 

<!-- 属 性 值 = 属性 名 ， 代 表 属性 为 tue--> 

<input type="checkbox" checked="checked"> 

<!-- 属 性 值 = 空 字符 串 ， 代 表 属 性 为 tue--> 

<input type="checkbox" checked=""> 

3. 属性 值 | 

属性 值 可 以 加 双 引号 ， 也 可 以 加 单 引 号 。HTMLS 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 | 
字符 串 、<、>、=、 单 引号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 

【示例 2〗】 下 面 写法 都 是 合法 的 : 

<input type="text"> 

<input type='text> 

<input type=text> 





14 案例 实战 


目前 主流 浏览 器 对 HIML5 提供 了 很 好 的 支持 ， 下 面 结合 示例 介绍 如 何 正确 创建 HTMLS5 文档 。 
1.4.1 编写 第 一 个 HTML5 文档 
本 节 示 例 将 遵循 HIMLS 语法 规范 编写 一 个 文档 。 本 例文 档 省 略 了 <html>、<head>、<body> 等 标 
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HTML5 的 DOCTYPE 声明 文档 类 型 ， 简 化 <meta> 的 charset 属性 设置 ， 省 略 <p> 标 签 的 结束 
使 用 < 元 素 户 的 方式 来 结束 <meta> 和 <br> 标 签 等 。 


<!DOCTYPE html> 

<meta charset="UTF-8"> 

<title>HTMLS5 基本 语法 </title> 

<hl>HTMLS 的 目标 </h1> 

<p>HTML5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 

<br 户 例如， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HTML 变 得 更 简洁 ， 开 发 出 


了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 Web 平台 提供 了 许 许多 多 新 的 功能 。 


这 段 代 码 在 正 浏览 器 中 的 运行 结果 如 图 1.1 所 示 。 
€ EECCEECG ET 3 


HTMLS 的 目标 
和 的 旧业 是 为 了 能 入 人 寻 克 同和 的 Wav， 书写 出 更 简洁 的 HTML 代 


例如 ， 的 林 信和 应 用 得 订 的 于 允 训 性 容 昌 提供 了 很 多 API 为 了 使 
HTML 变 得 更 简洁 ， 开 发 出 了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ,为 下 一 代 
Web 平 台 提 供 了 许 许多 多 新 的 功能 。 





示例 效果 图 1.1 编写 HTMLS 文档 
通过 短 短 几 行 代码 就 完成 了 一 个 页 面 的 设计 , 这 充分 说 明了 HTML5 语法 的 简洁 。 同时, HTML5 


不 是 一 种 XML 语言 ， 其 语法 也 很 随意 ， 下 面 从 这 两 方面 进行 逐 句 分 析 。 


第 - 行 代码 如 1 FF: 

<!DOCTYPE HIMIL> 

不 需要 包括 版 本 号 ， 仅 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模式 ， 可 谓 简明 扼要 。 

接 下 来 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏览 器 不 能 正确 解析 的 情况 。 

<meta charset="utf-8"> 

同样 也 很 简单 ，HTMLS5 不 区 分 大 小 写 ， 不 需要 标记 结束 符 ， 不 介意 属性 值 是 否 加 引号 ， 即 下 列 


代码 是 等 效 的 : 


<meta charset="utf-8"> 
<META charset="utf-8" /> 
<META charset=utf-8> 


在 主体 中 ， 可 以 省 略 主体 标记 ， 直 接 编写 需要 显示 的 内 容 。 虽 然 在 编写 代码 时 省 略 了 <html>、 


<head> 和 <body> 标 记 ， 但 在 浏览 器 进行 解析 时 ， 将 会 自动 进行 添加 。 但 是 , 考虑 到 代码 的 可 维护 性 ， 
| 在 编写 代码 时 ， 应 该 尽量 增加 这 些 基本 结构 标签 。 


[1 .4.2 比较 HTML4 与 HTML5 文档 结 


下 面 通过 示例 具体 说 明 HTMLS5 是 如 何 使 用 全 新 的 结构 化 标签 设计 网 页 的 。 


Ep 
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【示例 1】 本 例 设 计 将 页 面 分 成 上 、 中 、 下 三 部 分 : 上 面 显示 网 站 标题 ， 中 间 分 两 部 分 ， 左 侧 为 | 


辅助 栏 ， 右 侧 显示 网 页 正文 内 容 ， 下 面 显示 版 权 信息 ， 如 图 1.2 所 示 。 使 用 HTML4 构建 文档 基本 结 | 


构 如 下 了 
<div id="header">[ 标 题 栏 ]</div> 
<div id="aside">[ 侧 边栏 ]</div> 
<div id="article">[ 正 文 内 容 ]</div> 
<div id="footer">[ 页 脚 栏 ]</div> 


© EP Er 


图 1.2 简单 的 网 页 布局 


尽管 上 述 代 码 不 存在 任何 语法 错误 ,也 可 以 在 HTMLS5 中 很 好 地 解析 , 但 该 页 面 结构 对 于 浏览 器 
来 说 是 不 具有 区 分 度 的 。 对 于 不 同 的 用 户 来 说 ，ID 命名 可 能 因 人 而 异 ， 这 对 浏览 器 来 说 ， 就 无 法 辨 
别 每 个 div 元 素 在 页 面 中 的 作用 ， 因 此 也 必然 会 影响 其 对 页 面 的 语义 解析 。 

【示例 2】 下 面 使 用 HTMLS5 新 增 元 素 重 新 构建 页 面 结构 ， 明 确定 义 每 部 分 在 页 面 中 的 作用 。 

<header>[ 标 题 栏 ]</header> 

<aside>[ 侧 边栏 ]</aside> 

<article>[ 正 文 内 容 ]</article> 

<footer>[ 页 脚 栏 ]</footer> 

虽然 两 段 代码 不 一 样 ,但 比较 上 述 两 段 代 码 ， 使 用 HTML5 新 增 元 素 创建 的 页 面 代码 更 简洁 、 明 
晰 。 可 以 很 容易 看 出 ， 使 用 <div id="header">、<div id="aside">、<div id="article"> 和 <div id="footer"> 
这 些 标记 元 素 没有 任何 语义 ,浏览 器 也 不 能 根据 标记 的 ID 名 称 来 推断 它 的 作用 , 因为 ID 名 称 是 随意 
变化 的 。 

而 HIMLS 新 增 元 素 header， 明 确 地 告诉 浏览 器 此 处 是 页 头 ，aide 元 素 用 于 构建 页 面 辅助 栏目 ， 
article 元 素 用 于 构建 页 面 正 文 内 容 ，footer 元 素 定 义 页 脚注 释 内 容 。 这 样 极 大 地 提高 了 开发 者 的 便利 
性 和 浏览 器 的 解析 效率 。 


1.4.3 设计 一 个 较 详细 的 HTML5 文档 模板 


【示例 1】 下 面 是 一 个 简单 的 HTML5 文档 模板 代码 。 


<!DOCTYPE html> 
<html> 

<head> 

<meta charset="utf-8" /> 





13. 











| 
| 
| 
人 


0 





<title>Hello HTMLS</title> 
| <body> 
全 A 


| HTML5 文档 以 <!DOCTYPE html> 开 头 ， 这 是 一 个 文档 类 型 声明 ， 并 且 必 须 位 于 HTML5 文档 的 
SAL 出 一行 ， 亿 告诉 浏览 器 当前 文档 的 类 型 。 
| <html> 标 签 是 HTML5 文档 的 根 标签 ， 位 于 <!DOCTYPE html> 标 签 的 下 面 。<html> 标 签 支持 
| HTML5 全 局 属性 和 manifest 属性 。manifest 属性 用 于 创建 HTMLS5 离线 应 用 。 
| <head> 标 签 是 网 页 头 部 容器 。 位 于 <head> 内 部 的 元 素 可 以 包含 脚本 、 样 式 表 、 元 信息 等 。<head> 


| 标签 也 支持 HTML5 全 局 属性 。 
| <meta> 标 签 位 于 文档 头 部 区 域 ， 不 包含 任何 内 容 。 使 用 <meta> 的 属性 可 以 定义 文档 元 信息 ， 属 
| 性 值 以 名 / 值 对 的 形式 设置 。 例 如 ，<meta charset="utf-8" 人 > 定义 了 文档 的 字符 编码 ， 这 里 charset 是 
| <meta> 标 签 的 属性 ，"utf-8" 是 该 属性 的 值 。HTML5 中 大 部 分 标签 都 定义 有 属性 ， 以 扩展 标签 的 功能 。 
<title> 标 签 位 于 <head> 标 签 内 ， 定 义 网 页 文档 的 标题 ， 显 示 在 浏览 器 标题 栏 ， 或 当 网 页 被 添加 到 
收藏 夹 时 作为 默认 标题 使 用 ， 也 方便 搜索 引擎 抓 取 。 因 此 ， 当 写 HTMLS5 文档 时 一 定 要 设置 该 标签 。 
<body> 标 签 定义 网 页 正文 ， 文 档 的 所 有 内 容 ， 如 文本 、 超 链接 、 图 像 、 表 格 、 列 表 等 都 包含 在 
| 该 标签 中 ， 并 显示 在 页 面 中 。 
【示例 2】 为 了 帮助 读者 更 好 地 对 HTML5 文档 有 一 个 全 局 认识 ， 也 为 了 让 读 
者 初步 了 解 复杂 的 HTMLS 文档 代码 ， 下 面 给 出 一 个 详细 的 、 符 合 标准 的 HIML5 
文档 模板 , 并 进行 详细 注释 。 当 然 , 在 编写 HTML5 文档 时 , 这 些 代码 不 是 必需 的 ， 
使 用 时 可 以 根据 需要 酌情 增删 。 
二 上 阅读 具体 代码 展示 请 查看 示例 源 代码 ， 或 者 扫 码 学 习 。 





1.5 HIMLS API 


HTMLS 引入 了 很 多 新 的 API 和 扩展 ， 并 对 一 些 现 有 的 API 进行 了 修改 或 别 除 。 本 节 仅 做 选修 ， 
| 感 兴趣 的 读者 可 扫 码 了 解 。 


1.5.1 新 增 的 API 


HIML5 是 一 种 开放 的 Web 标准 , 其 技术 内 涵 和 API 外 延 会 随 着 Web 的 发 展 而 
不 断 丰 富 。 目 前 HTMLS 主要 包括 下 面 这 些 功能 。 这 些 API 可 以 与 应 用 程序 中 引入 
| 外 的 新 元 素 一 起 使 用 。 
| 线 上 阅读 详细 内 容 请 扫 码 阅读 。 
| 
| 


| 1.5.2 修改 的 API 


以 下 几 点 是 基于 2 级 DOM HTML 的 各 种 使 用 方式 进行 修改 。 详 细 内 容 请 扫 码 
阅读 。 
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1.5.3 扩展 Document 


2 级 DOM HTML 有 一 个 HIMLDocument 接口 , 继承 于 Document, 在 此 基础 上 ， 
HIML5 提供 了 一 些 特殊 的 成 员 和 功能 。 
详细 内 容 请 扫 码 阅读 。 


1.5.4 扩展 HTMLEIlement 

HTMLElemen 接口 也 在 HTML 范围 下 获得 了 几 个 扩展 。 详 细 内 容 请 扫 码 阅读 。 
1.5.5 扩展 DOM HTML 

在 2 级 DOM HTML 接口 中 新 增 一 些 其 他 功能 的 扩展 。 详 细 内 容 请 扫 码 阅读 。 
1.5.6 ” 弃 用 的 API 


在 HTML5 中 ， 一些 API 已 经 被 移 除 ， 或 者 标记 为 过 时 。 详 细 内 容 请 扫 码 阅读 。 








1.6 在 线 练 习 


练习 设计 HTMLS5 文档 的 基本 方法 。 





»。15* 





HTML5 新 增 元 素 和 文档 结构 


为 了 使 文档 结构 更 加 清晰 、 明 确 、 容 易 阅读 ，HTMLS 增加 了 很 多 新 的 元 素 。 本 章 将 详 
细 介 绍 这 些 新 增 的 元 素 ， 涉 及 它们 的 定义 、 使 用 方法 以 及 演示 示例 ， 最 后 再 介绍 如 何 应 用 这 


些 新 元 素 设计 崭新 的 HTML5 文档 。 


【 学 习 重 点 】 

MH 正确 使 用 HTMLS 结构 元 素 。 

MH 正确 使 用 HTMLS 语义 元 素 。 

MH 设计 符合 语义 的 HTML5 文档 结构 。 
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2.1 HTML5 元 素 


HTMLS 包含 一 百 多 个 标签 ， 大 部 分 继承 自 HTML4， 同 时 新 增 30 个 标签 ， 简 单 介绍 如 下 。 
2.1.1 新 元 素 分 类 


根据 现 有 的 规范 ， 把 HTMLS5 新 增 元 素 按 优先 级 分 为 4 大 类 ， 简 单 说明 如 下 。 
回 ”结构 性 元 素 。 

回 ”级 块 性 元 素 。 

回 “ 行 内 语义 性 元 素 。 

回 “” 交互 性 元 素 。 

详细 说 明 请 扫 码 了 解 。 


2.1.2 ”废除 的 元 素 


HTML5 废除 了 HIML4 中 部 分 过 时 的 元 素 ， 例 如 : 
回 ”使 用 CSS 蔡 代 的 元 素 。 

回 ” 弃 用 frame 框架 。 

加 ”部 分 浏览 器 支持 的 私有 元 素 。 
详细 说 明 请 扫 码 了 解 。 











2.2 设计 新 的 文档 结构 


HTML5 新 增多 个 结构 化 元 素 ， 以 方便 用 户 创建 更 友好 的 页 面 主体 框架 ， 下 面 来 详细 学 习 。 
2.2.1 article 一 一 文章 块 


article 表示 文章 ， 用 来 标识 页 面 中 一 块 完整 的 、 独 立 的 、 可 以 被 转发 的 内 容 。 例 如 ， 报 纸 文章 、 
论坛 帖子 、 用 户 评论 、 博 客 条 目 等 。 


会 提示 : 一 些 交 互 式 小 部 件 或 小 工具 ， 或 任何 其 他 可 独立 的 内 容 ， 原 则 上 都 可 以 作为 article 块 , 如 | 
日 期 选择 器 组 件 ， 但 这 些 内 容 不 是 HTML5 新 增 article 元 素 的 主要 目的 ， 故 不 要 滥用 。 


【示例 1】article 内 容 块 通常 包含 标题 ， 放 在 header 元 素 里 面 ， 有 时 还 包含 footer， 定 义 附加 信 | 
息 。 下 面 示例 演示 了 如 何 使 用 article 设计 一 篇 新 闻 稿 。 
<article> 
<header> 
<hl> 首 届 Web 高 层 论坛 (Web Executive Forum) 将 于 2017 年 11 月 在 美国 旧金山 举行 <hl> 
<time pubdate="pubdate">2017 年 9 月 26 日 消息 </time> 
</header> 
<p>W3C 将 于 2017 年 11 月 8 日 在 美国 加 州 旧金山 举行 首届 W3C Web 高 层 论坛 (Web Executive Forum)， | 





= 和 


SG 


来 自 支 付 宝 (Alipay)、 美 国运 通 (American Express)、 彭 博 (Bloomberg)、 哈 曼 (HARMAN)、 谷 歌 (Google)、 
英特尔 (Intel) .Mozilla、 三 星 (Samsung)、 南 内 华 达 地 区 交通 局 (Southem Nevada Regional Transportation Agency)、 
悉尼 大 学 (University of Sydney)、Worldpay、Yubico 等 机 构 的 代表 将 与 W3C 的 发 明 人 、W3C 理事 长 Tim Bemers 
Lee 一 起 , 探讨 Web 的 技术 趋势 及 对 行业 产业 的 影响 。 这 是 W3C 首次 举办 此 类 论坛 ， 论坛 将 与 W3C TPAC 2017 
食 斤 | | 会议 同 期 举行 。</p> 


| <footer> 

<p> 来 自 <a hre 伍 "http://www.chinaw3c.org/archives/1980/" target=”blank">W3C 中 国 </a></p> 
| </footer> 
| </article> 


上 面 示例 是 一 篇 互联 网 新 闻 的 文章 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 这 部 分 中 ， 文 
章 的 标题 被 镶嵌 在 hl 元 素 中 ， 文 章 的 发 表 日 期 镶嵌 在 time 元 素 中 。 在 标题 下 部 的 p 元 素 中 ,嵌入 了 
一 大 段 文 章 的 正文 ， 在 结尾 处 的 footer 元 素 中 ， 作 为 脚注 ， 嵌 入 了 文章 的 来 源 。 整 个 文章 块 的 内 容 相 
对 比较 独立 、 完 整 ， 因 此 对 这 部 分 内 容 使 用 了 article 元 素 。 

【示例 2】article 元 素 可 以 嵌 套 使 用 ， 原 则 上 内 层 的 内 容 要 与 外 层 的 内 容 相关 联 。 例 如 ， 在 一 篇 
互联 网 新 闻 中 ,针对 该 新 闻 的 相关 评论 就 可 以 使 用 嵌 套 article 元 素 设计 ， 用 来 呈现 评论 的 article 元 素 
被 包含 在 外 层 article 元 素 里 面 。 

<article> 
<header>[ 省 略 ]</header> 
<p>[ 请 参考 示例 1]</p> 
<footer>...</footer> 
<section> 
<h2> 评 论 <h2> 
<article> 
<h3> 网 友 昵称 1</h3> 
"> 


<time pubdate datetime="2017-9-26 19:40-08:00"> 1 小 时 前 </time> 


</article> 
<article>[ 参 考 第 一 条 评论 的 结构 ]</article> 
<article>[ 每 条 评论 作为 一 个 相对 独立 的 内 容 块 ]</article> 
<article>[ 内 层 article 块 与 外 层 article 块 相关 联 ]</article> 
</section> 
</article> 
上 面 示 例 的 内 容 比 示例 1 的 内 容 更 加 丰富 , 它 添加 了 评论 内 容 。 具 体 来 说 ，section 把 正文 与 评论 
部 分 进行 了 区 分 ， 在 section 元 素 中 嵌入 了 评论 的 内 容 ， 评 论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 独 
立 、 完 整 的 ， 因 此 每 条 评论 都 使 用 一 个 article， 在 评论 中 又 可 以 分 为 标题 和 评论 内 容 两 部 分 ， 分 别 放 
| 在 header 元 素 与 p 元 素 中 。 


| 2.2.2 section 一 一 区 块 


section 表示 区 块 ， 用 于 标识 文档 中 的 节 ， 在 页 面 上 多 对 内 容 进 行 分 区 。 例 如 ， 章节、 页 眉 、 
| 或 文档 中 的 其 他 部 分 。 
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[ 辩 析 】 | 


div 元 素 也 可 以 用 来 对 页 面 进行 分 区 ,但 section 元 素 并 非 一 个 普通 的 容器 。 当 一 个 容器 需要 被 直 | 
接 定 义 样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div， 而 非 section 元 素 。 | 
div 元 素 关注 结构 的 独立 性 ， 而 section 元 素 关注 内 容 的 独立 性 ，section 元 素 包含 的 内 容 可 以 单独 | 全 内 
存储 到 数据 库 中 ， 或 输出 到 Word 文档 中 。 | 一 一 
【示例 1】 一 个 section 区 块 通常 由 标题 和 内 容 组 成 。 下 面 示例 使 用 section 元 素 包 庄 排行 版 的 内 
容 ， 作 为 一 个 独立 的 内 容 块 进行 定义 。 
<section cite="http://music.baidu.com/"> | 
<h1> 新 歌 榜 </h1> | 
<ol> 
<li><a hre 仁 "#"> 和 爸爸 去 哪儿 <p class="ui-li-aside"> 群星 </p></a></li> 
<li><a hre 人 ="#"> 爱 ， 不 解释 <p class="ui-li-aside"> 张杰 </p></a></li> | 
<li><a href 人 ="#"> 爱 无 反 顾 <p class="ui-li-aside"> 姚 贝 娜 </p></a></li> | 
<li><a hre 合 "#"> 房 间 <p class="ui-li-aside"> 刘 瑞 琦 </p></a></li> | 
| 
| 
| 








<li><a hre 合 "#f"> 动 人 的 传说 <p class="ui-li-aside"> 杭 娇 </p></a></li> 
<li><a hre 仁 "#"> 泌 墨 <p class="ui-li-aside"> 周华健 </p></a></li> 
<li><a hre 仁 "#"> 一 起 摇摆 <p class="ui-li-aside"> 汪峰 </p></a></li> 
<li><a hre 伍 "#"> 就 当 是 你 为 了 我 <p class="ui-li-aside"> 许诺 </p> </a></li> 
<li><a hre 伍 "#">summer time<p class="ui-li-aside"> 吉 克 集 逸 </p></a></li> | 
<li><a hre 伟 "po"> 不 值得 <p class="ui-li-aside"> 曾 一 鸣 </p></a></i> 
</ol> 
</section> ! 


section 元 素 包 含 cite 属性 , 用 来 定义 section 的 URL。 如 果 section 摘自 Web, 则 可 以 设置 该 属性 。 | 
【辨析 】 
article 和 section 都 是 HIMLS 新 增 的 元 素 ， 它 们 都 用 来 区 分 不 同 内 容 ， 用 法 也 相似 ， 从 语义 角度 
分 析 两 者 区 分 很 大 。 
article 代表 文档 、 页 面 或 者 应 用 程序 中 独立 、 完 整 的 可 以 被 外 部 引用 的 内 容 。 因 为 article 
是 一 段 独 立 的 内 容 ， 所 以 article 通常 包含 header 和 footer 结构 。 
section 用 于 对 网 站 或 者 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 通常 由 内 容 和 标题 
组 成 。 因 此 ， 需 要 包含 一 个 标题 ， 一 般 不 用 包含 header 或 者 footer 结构 。 | 
通常 使 用 section 元 素 为 那些 有 标题 的 内 容 进行 分 段 ， 类 似 文章 分 段 操作 。 相 邻 的 section 内 容 应 | 
当 是 相关 的 ， 而 不 像 article 之 间 各 自 独立 。 
【示例 2】 下 面 示例 混用 article 和 section 元 素 , 从 语义 上 比较 两 者 不 同 。article 内 容 强 调 独 立 性 、| 
完整 性 ，section 内 容 强 调 相关 性 。 
<article> 
<header> 
<hl> 蝶 恋 花 <hl> 
</header> 
<p> 槛 菊 悉 烟 兰 泣 露 ， 罗 幕 轻 寒 ， 燕 子 双飞 去 。 明 月 不 请 离 恨 苦 ， 斜 光 到 晓 穿 朱 户 。</p> 
<p> 昨 夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 。 欲 寄 彩 签 兼 尺 素 ， 山 长 水 阔 知 何 处 。</p> 
<section> 
<h2> 解 析 </h2> 
<article> 
<h3> 注 释 </h3> 





*。19 。 


2 OA ( 微 课 精 编 版 ) 


<p> 槛 : 栏杆 。</p> 
<p> 罗 幕 : 丝 罗 的 帷幕 ， 富 贵人 家 所 用 。</p> 
<p> 朱 户 : 狂言 朱 门 ， 指 大 户 人 家 。</p> 
<p> 尺 素 : 书信 的 代称 。</p> 
</article> 
<article> 
<h3> 评 析 </h3> 
<p> 此 词 经 疏 注 的 笔墨 、 温 婉 的 格调 、 说 严 的 章法 ， 传 达 出 作者 的 暮 秋 怀 人 之 情 。 </p> 
<p> 上 片 由 苑 中 景物 起 笔 ， 下 片 写 登楼 望 远 。 以 无 可 奈何 的 帐 问 作 结 ， 给 人 情 也 悠悠 、 恨 也 悠 
悠 之 感 。 </p> 
</article> 
</section> 
</article> 
【追问 】 
既然 article、section 是 用 来 划分 区 域 的 ， 又 是 HTMLS5 的 新 元 素 , 那么 是 否 可 以 用 article、section 
取代 div 来 布局 网 页 呢 ? 
答案 是 否定 的 ，div 的 用 处 就 是 布局 网 页 ， 划 分 大 的 区 域 ， 所 以 我 们 习惯 性 地 把 div 当成 了 一 个 
容器 。 而 HIMLS 改变 了 这 种 用 法 , 它 让 div 的 工作 更 纯正 。 div 就 是 用 来 布局 的 , 在 不 同 的 内 容 块 中 ， 
我 们 按照 需求 添加 article、section 等 内 容 块 , 并 且 显示 其 中 的 内 容 , 这 样 才 是 对 这 些 元 素 的 合理 使 用 。 
因此 ， 在 使 用 section 元 素 时 应 该 注意 几 个 问题 : 
不 要 将 section 元 素 当 作 设置 样式 的 结构 容器 ， 对 于 此 类 操作 应 该 使 用 div 元 素 实现 。 
如 果 article、aside 或 nav 元 素 更 符合 语义 使 用 条 件 ， 不 要 首选 使 用 section 元 素 。 
不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 
【补充 】 
使 用 HIML5 大 纲 工具 (http://gsnedders.html5.org/outliner/) 来 检查 页 面 中 是 否 有 没 标题 的 section， 
如 果 使 用 该 工具 进行 检查 后 ， 发 现 某 个 section 的 说 明 中 有 “untitiled section”( 没 有 标题 的 section) 
文字 ， 这 个 section 就 有 可 能 使 用 不 当 ， 但 是 nav 和 aside 元 素 没有 标题 是 合理 的 。 
【示例 3】 下 面 示例 进一步 演示 了 article 和 section 混用 的 情景 。 
<article> 
<hl>W3C</hl> 
<p> 万 维 网 联盟 (World Wide Web Consortium，W3C)， 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 理工 学 
院 计算 机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 者 蒂 姆 &middot: 伯 纳 斯 - 李 。</p> 
<section> 
<h2>CSS</h2> 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 “风格 样式 表 (Style Sheet)”， 它 是 用 来 








进行 网 页 风格 设计 的 。</p> 


</section> 
<section> 
<h2>HTML</h2> 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 
</section> 
</article> 
在 上 面 示例 中 ， 首 先 可 以 看 到 整个 版 块 是 一 段 独立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 标识 。 
该 内 容 是 一 篇 关于 W3C 的 简介 , 该 文章 分 为 3 段 ,每 一 段 都 有 一 个 独立 的 标题 , 因此 使 用 了 两 个 section 
元 素 区 分 。 
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【追问 】 

为 什么 没有 对 第 一 段 使 用 section 元 素 呢 ? 

其 实 是 可 以 使 用 的 ， 但 是 由 于 其 结构 比较 清晰 ， 浏 览 器 能 够 识别 第 一 段 内 容 在 一 个 section 内 ， 
所 以 也 可 以 将 第 一 个 section 元 素 省 略 ， 但 是 如 果 第 一 个 section 元 素 里 还 要 包含 子 section 元 素 或 子 | 
article 元 素 ， 那 么 就 必须 标识 section 元 素 。 | 

【示例 4】 下 面 是 一 个 包含 article 元 素 的 section 元 素 示例 。 

<section> | 

<hl>W3C</h1> | 

<article> | 
<h2>CSS</h2> | 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 “风格 样式 表 〈Style Sheet)”， 它 是 用 来 | 

进行 网 页 风格 设计 的 。</p> 

</article> 

<h2>HTML</h2> 

<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 

</section> 

这 个 示例 比 示例 3 复杂 了 一 些 。 首先, 它 是 一 篇 文章 中 的 一 段 , 因此 没有 使 用 article 元 素 。 但 是 ， 
在 这 一 段 中 有 几 块 独立 的 内 容 ， 所 以 嵌入 了 几 个 独立 的 article 元 素 。 

在 HIML5 中 ，article 可 以 是 一 种 特殊 功能 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 
section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 有 具体 来 说 ， 如 果 一 块 内容 相 对 来 说 比较 独立 、 完 
整 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 一 块 内 容 分 成 几 段 ， 应 该 使 用 section 元 素 。 

在 HIML5 中 ，div 变 成 了 一 种 容器 ， 当 应 用 CSS 样式 的 时 候 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 
CSS 样式 的 套用 。 因 此 ， 可 以 将 页 面 的 所 有 从 属 部 分 ， 如 导航 条 、 菜 单 、 版 权 说 明 等 ， 包 含 在 一 个 统 

-的 页 面 结构 中 ， 以 便 统一 使 用 CSS 样式 来 进行 装饰 。 


2.2.3 nav 一 一 导航 条 


nav 表示 导航 条 ， 用 来 标识 页 面 导航 的 链接 组 。 一 个 页 面 中 可 以 拥有 多 个 nav， 作 为 页 面 整体 或 
不 同 部 分 的 导航 。 具 体 应 用 场景 如 下 : | 
主 菜单 导航 。 一 般 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 在 站 内 快速 切换 ， 如 主 菜单 、| 
置顶 导航 条 、 主 导航 图 标 等 。 
侧 边栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 文 | 
章 或 当前 商品 跳 转 到 相关 文章 或 商品 页 面 上 去 。 
回 ”页 内 导航 。 就 是 页 内 锚 点 链接 ， 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 | 
并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 中 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 可 。 例 | 
如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 footer 元 素 最 恰当 。 
【示例 1】 在 HIML5 中 ， 只 要 是 导航 性 质 的 链接 ， 我 们 就 可 以 很 方便 地 将 其 放 入 nav 元 素 中 。 
该 元 素 可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 
<nav draggable="true"> 
<a hre 伍 "index.html"> 首 页 </a> 
<a hre 全 "book.html"> 图 书 </a> 
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| <a href="bbs.html"> 论 坛 <la> 

| </nav> 

| 上 述 代 码 创 建 了 一 个 可 以 拖 动 的 导航 区 域 , nav 元 素 中 包含 了 三 个 用 于 导航 的 超 链 接 ， 即 “首页 ” 
全 fF | “图 书 ”“ 论 坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 
| 【示例 2】 下 面 示例 由 多 部 分 组 成 ， 每 部 分 都 有 链接 ， 但 只 将 最 主要 的 链接 放 入 nav 元 素 中 。 


< 技术 资料 SHI 
| 


<nav> 
<ul> 
<li><a href="/"> 主 页 </a></li> 
| <li><a hre 人 "blog"> 博 客 </a></i> 
| <lul> 
| </nav> 
| <artide> 
| <header> 
| <hl>HTML5+CSS3</hl> 
| <nav> 
| <u> 
| <li><a href="#HTML5">HTML5</a></li> 
| <li><a href="#CSS3">CSS3</a></li> 
| <lu> 
| </nav> 
| </header> 
| <section id="HTML5"> 
| <hl>HTML5</h1> 
| <p>HTML5 特性 说 明 </p> 
| </section> 
| <section id="CSS3"> 
| <hl>CSS3</hl> 
| <p>CSS3 特性 说 明 </p> 
| </section> 
| <footer> 
| <p> <a hre 仁 "?edit"> 编 辑 </a> | <a hre 仁 "?delete"> 删 除 </a> | <a hre 仁 "?add"> 添 加 </a> </p> 
| </footer> 
| </article> 
| <footer> 
| <p><small> 版 权 信息 </small></p> 
| </footer> 


| 在 这 个 例子 中 ， 第 一 个 nav 元 素 用 于 页 面 导 航 , 将 页 面 跳 转 到 其 他 页 面 上 去 ， 如 跳 转 到 网 站 主页 
| 或 博客 页 面 ， 第 二 个 nav 元 素 放置 在 article 元 素 中 ， 表 示 在 文章 中 进行 导航 。 除 此 之 外 ，nav 元 素 也 
| 可 以 用 于 其 他 所 有 你 觉得 重要 的 、 基 本 的 导航 链接 组 中 。 


| < 人 注意 : 不 要 用 menu 元 素 代替 nav 元 素 。menu 主要 用 在 一 系列 交互 命令 的 菜单 上 ， 如 快捷 菜单 。 
2.2.4 ”aside 一 一 辅助 栏 


aside 表示 侧 边 ， 用 来 标识 所 处 内 容 之 外 的 内 容 。aside 内 容 应 该 与 所 处 的 附近 内 容 相关 。 例 如 ， 
| 当前 页 面 或 文章 的 附属 信息 部 分 , 它 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边 广告 、 导 航 条 ， 
」 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 
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aside 元 素 主要 有 两 种 用 法 : | 
(1) 作为 主体 内 容 的 附属 信息 部 分 ， 包 含 在 article 中 ，aside 内 容 可 以 是 与 当前 内 容 有 关 的 参考 | 
资料 、 名 词 解释 等 。 | 
【示例 1】 下 面 示例 设计 一 篇 文章 ， 文 章 标题 放 在 header 中 ， 在 header 后 面 将 所 有 关于 文章 的 | 
部 分 放 在 了 一 个 article 中 ， 将 文章 正文 放 在 一 个 p 元 素 中 。 该 文章 包含 一 个 名 词 注释 的 附属 部 分 , 因 | 
此 在 正文 下 面 放置 了 一 个 aside 元 素 ， 用 来 存放 名 词 解释 的 内 容 。 


<header> 
<hl>HTML5</hl> | 
</header> 
<article> 
<hl>HTML5 历史 </h1> 
<p>HTMLS 草案 的 前 身 名 为 Web Applications 1.0, 于 2004 年 被 WHATWG 提出 , 于 2007 年 被 W3C 接 | 
纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HTML5 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。2014 年 10 月 28 | 
日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTML5 的 官方 推荐 标准 。</p> 
<aside> 
<hl> 名 词 解 释 </hl> 
<d> 
<dt>WHATWG</dt> 
<dd>Web Hypertext Application Technology Working Group,HTML 工作 开发 组 的 简称 ， 目 前 与 | 
W3C 组 织 同时 研发 HTML5。</dd> 
</d> 
<dl> 
<dt>W3C</dt> 
<dd>World Wide Web Consortium， 万 维 网 联盟 ， 万 维 网 联盟 是 国际 著名 的 标准 化 组 织 。1994 
年 成 立 后， 至 今 已 发 布 近 百 项 万 维 网 相关 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。</dd> 
</d> 
</aside> 
</article> | 
aside 被 放置 在 article 内 部 ， 因 此 引擎 将 这 个 aside 内 容 理解 为 与 article 内 容 相 关联 的 。 | 
(2) 作为 页 面 或 站 点 辅助 功能 部 分 ， 在 article 之 外 使 用 。 最 典型 的 形式 是 侧 边栏 ， 其 中 的 内 容 | 
可 以 是 友情 链接 、 最 新 文章 列表 、 最 新 评论 列表 、 历 史 存档 、 日 历 等 。 | 
【示例 2】 下 面 代码 使 用 aside 元 素 为 个 人 博客 添加 一 个 友情 链接 辅助 版 块 。 
<aside> 
<nav> 
<h2> 友 情 链 接 </h2> 
<ul> 
<li> <a hre 伍 "#"> 网 站 1</a></li> 
<li> <a hre 个 "#"> 网 站 2</a></li> 
<li> <a hre 伍 "#"> 网 站 3</a></li> 
</ul> 
</nav> 
</aside> 


友情 链接 在 博客 网 站 中 比较 常见 ， 一 般 放 在 左右 两 侧 的 边栏 中 ， 因 此 可 以 使 用 aside 来 实现 ， 但 | 
是 这 个 版 块 又 具有 导航 作用 ， 因 此 嵌 套 了 一 个 nav 元 素 ， 该 侧 边栏 的 标题 是 “友情 链接 ”， 放 在 了 b2 | 
元 素 中 ， 在 标题 之 后 使 用 了 一 个 UL 列表 ， 用 来 存放 具体 的 导航 链接 列表 。 
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| 2.2.5 ”main 一 一 主要 区 域 


| main 表示 主要 ， 用 来 标识 网 页 中 的 主要 内 容 。main 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 它 不 应 包 
| 含 在 网 页 中 重复 出 现 的 内 容 ， 如 侧 栏 、 导 航 栏 、 版 权 信 息 、 站 点 标志 或 搜索 表单 等 。 
| 简单 来 说 , 在 一 个 页 面 中 , 不 能 出 现 一 个 以 上 的 main 元 素 。 main 元 素 不 能 被 包含 在 article、 aside、 
footer、header 或 nav 中 。 
| 僵 提示 : 由 于 main 元 素 不 对 页 面 内 容 进行 分 区 或 分 块 ， 所 以 不 会 对 网 页 大 岗 产 生 影响 。 
【示例 】 下 面 示例 使 用 main 元 素 包含 页 面 主要 区 域 ， 这 样 更 有 利于 网 页 内 容 的 语义 分 区 ， 同 时 
搜索 引擎 也 能 够 主动 抓 取 主 要 信息 ， 避 免 被 次 要 信息 干扰 。 
<header> 
<nav> 
<u> 
<li><a href="#"> 首 页 </a></li> 
<li><a hre 伍 "> 站 内 新 闻 </a></li> 
<li><a hre 伍 "#"> 站 外 新 闻 </a></li> 
</ul> 
</nav> 
</header> 
<main> 
<h1> 站 内 新 闻 </h1> 
<nav> 
<ul> 
<li><a href="#">HTML5</a></li> 
<li><a href="#">CSS3</a></li> 
<li><a href="#">JavaScript</a></li> 
</ul> 
</nav> 
<H2 id="web">W3C</H2> 
<h3>W3C 中 国 区 会 员 沙 龙 在 北京 航空 航天 大 学 举行 </h3> 
<p>2017 年 9 月 14 日 W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 沙 龙 活动 ， 向 到 会 的 中 国 区 会 员 代 
介绍 W3C 目前 标准 工作 进展 及 计划 , 并 提供 一 个 新 老 朋 友 参 与 W3C 及 其 他 相关 话题 问答 与 互动 讨论 的 交流 














<ul> 
| 
| <li>W3C 发 布 ODRL 信息 模型 .ODRL 词汇 表 及 表达 两 份 候选 推荐 标准 征集 参考 实现 及 审阅 意见 


<li>W3C 技术 研讨 会 : Web 虚拟 现实 编著 一 机 遇 与 挑战 </li> 
<li>W3C 发 布 核心 无 障碍 API 映射 Core-AAM) 1.1 版 候选 推荐 标准 征集 参考 实现 </li> 
</ul> 
<h2 id="blog">W3C 官方 博客 <h2> 
<u> 
<li>W3C 启动 WebAssembly 工作 组 </li> 
<li>W3C 数据 的 未 来 方向 </li> 
| <li>W3C 数字 出 版 主要 进展 </li> 
| < 
| </main> 
| <footer> 本 站 由 北京 航空 航天 大 学 (W3C/Beihang) 维 护 京 ICP 备 05004617-3 文保 网 安 备案 号 
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| 
| 下 棕 
header 表示 页 眉 ， 用 来 标识 页 面 标题 栏 。header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 视频 讲解 
常用 来 放置 整个 页 面 或 者 一 个 内 容 块 的 标题 。 会 内 


header 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 表 单 或 相关 的 LOGO 信息 ， 一 般 整个 页 面 的 标题 应 | 


该 放 在 页 面 的 前 面 。 


【示例 1) 在 一 个 网 页 内 可 以 多 次 使 用 header 元 素 ， 下 面 示例 显示 为 每 个 内 容 区 块 添加 一 个 | 


header。 | 


<header> 
<h1> 网 页 标题 </h1> 

</header> 

<article> 


<header> 
<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正文 </p> 
</article> 


在 HTML5 中 ， header 内 部 可 以 包含 hl 一 h6 元 素 ， 也 可 以 包含 hgroup、table、form、nav 等 元 
素 ， 只 要 应 该 显示 在 头 部 区 域 的 标签 ， 都 可 以 包含 在 header 元 素 中 。 
【示例 2】 下 面 示例 是 个 人 博客 首页 的 头 部 区 域 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 。 
<header> 


oup> 
<hl>LOGO</hl> 
<a href="#">[URL]</a> <a hre 伍 "#">[ 订 阅 ]</a> <a hre 伍 "#">[ 手 机 订阅 ]</a> 
</hgroup> 
<nav> 
<u> 
< 六 首页 </I 记 
<li><a hre 伍 "#"> 目 录 </a></li> 
<li><a href="#"> 社 区 </a></li> 
<li><a hre 伍 "#'> 微 博 我 </a></li> 
</ul> 
</nav> 
</header> 


2.2.7 hgrou 


hgroup 表示 标题 分 组 ， 用 来 为 标题 或 子 标题 进行 分 组 。 通常 heroup 与 h1~h6 元 素 组 合 使 用 ， 一 | 
个 内 容 块 中 的 标题 及 其 子 标题 可 以 通过 hrgoup 组 成 一 组 。 但 是 ， 如 果 文章 只 有 一 个 主 标题 ， 则 不 需 | 
要 hgroup 元 素 。 ! 
A 注意 : hgroup 元 素 在 HTML5.1 版 中 被 废除， 不 再 建议 使 用 。 替 代 方案 请 扫 码 了 解 。 
【示例 】 下 面 示例 显示 如 何 使 用 heroup 元 素 把 主 标题 、 副 标题 和 标题 说 明 进行 分 组 ， 
以 便 让 引擎 更 容易 识别 标题 块 。 二 上 国法 
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</hgroup> 
</header> 


<ul> 


</u> 


【示例 1】 在 HTML4 中 ， 


<article> 
</article> 
<footer> 
<ul> 
<li> 关 于 </li> 
<l> 导 航 </li> 
<1i> 联 系 <Ili> 
</ul> 
</footer> 


【示例 2】 在 一 个 页 面 





<header> 
<h1> 网 页 标题 </h1> 
</header> 
<article> 
<h2> 文 章 标题 <h2> 
<p> 文 章 内 容 正文 </p> 
<footer> 注 释 </footer> 
</article> 
<section> 
<h2> 段 落 标题 <h2> 
<p> 正 文 </p> 





<hgroup> 
<hl> 首 届 Web 高 层 论坛 将 于 2017 年 11 月 在 美国 旧金山 举行 <hl> 


<h2>September 26. 2017</h2> 
<h3> 国 际 新 闻 .TPAC 及 AC, 博 客 文章 .技术 活动 </h3> 


<p> 本 次 论坛 的 议程 包括 一 系列 圆桌 讨论 (Panel Discussion) 和 高 端 对 话 : </p> 
<li>Web 支付 的 未 来 《Future of Payments on the Web) </li> 


<li> 网 联 汽车 、 城 市 和 Web (Connected Cars、Cities and Web) </li> 


<li>Web 新 兴 技术 (Emerging Technologies) </li> 
<li> 对 话 : Web 的 未 来 ， 嘉 宾 ; Brad Stone 〈 彭 博 )、Sir Tim Bemers Lee (W3C) </li> 


| footer 表示 脚注 ， 用 来 标识 文档 或 节 的 页 脚 。footer 元 素 应 当 含 有 其 包含 元 素 的 信息 。 例 如 ， 页 
| 脚 通常 包含 文档 的 作者 、 版 权 信息 、 使 用 条 款 链 接 、 联 系 信息 等 。 


- 般 使 用 <div id="footer"> 包 含 页 脚 信息 , 现在 使 用 footer 元 素来 替代 ， 


| 更 富有 语义 。 下 面 示例 使 用 footer 元 素 为 页 面 添加 版 权 信息 栏目 。 


中 ， 可 以 使 用 多 个 footer 元 素 。 同 时 ， 可 以 为 article 或 section 内 容 添 加 
| footer。 下 面 示例 分 别 在 article、section 和 body 区 域内 添加 footer 信息 。 
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<footer> 段 落 标记 </footer> | 
</section> 
<footer> 网 页 版 权 信 息 </footer> 


2.3 设计 新 的 语义 信息 


HTML5 不 仅 增加 了 很 多 结构 元 素 ， 也 增加 了 很 多 实用 语义 元 素 ， 下 面 来 详细 学 习 。 
2.3.1 address 一 一 联系 信息 


address 元 素 用 来 在 文档 中 定义 联系 信息 ， 包 括 文档 作者 或 文档 编辑 者 名 称 、 电 子 邮 箱 、 真 实地 | 
址 、 电 话 号 码 等 。 
【示例 1】address 元 素 的 用 途 不 仅仅 是 描述 电子 邮箱 或 真实 地 址 , 还 可 以 描述 与 文档 相关 的 联系 | 
人 的 所 有 联系 信息 。 下 面 代 码 展示 了 博客 侧 栏 中 的 一 些 技术 参考 网 站 网 址 链接 。 
<address> 
<a href="http://www.w3.0org/">W3C</a> 
<a href="http://www.whatwg.org/">WHATWG</a> 
<a hre 伍 "http://www.mhtml5.com/">HTMLS5 研究 小 组 </a> 
</address> 


【示例 2】 也 可 以 把 footer 元 素 、time 元 素 与 address 元 素 结合 起 来 使 用 ， 以 实现 设计 一 个 比较 | 
复杂 的 版 块 结构 。 
<footer> 
<section> 
<address> | 
<a title=" 作 者 : MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5"> | 
HTMLS5 - Web 开发 者 指南 </a> 
</address> 
<p> 发 布 于 : 
<time datetime="2017-6-1">2017 年 6 月 1 日 <time> 
<p> 
</section> 
</footer> 
这 个 示例 把 博客 文章 的 作者 、 博 客 的 主页 链接 作为 作者 信息 放 在 了 address 元 素 中 ， 把 文章 发 表 | 
日 期 放 在 了 time 元 素 中 , 把 这 个 address 元 素 与 time 元 素 中 的 总 体内 容 作 为 脚注 信息 放 在 了 footer 元 | 
素 中 。 


2.3.2 time 一 一 显示 时 间 
time 元 素 定义 公历 的 时 间 〈24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 | 
该 元 素 能 够 以 机 器 可 读 的 方式 对 日 期 和 时 间 进 行 编码 。 例如 , 浏览 器 能 够 把 生日 提醒 或 排 定 的 事 | 


件 添加 到 用 户 日 程 表 中 ， 搜 索引 擎 也 能 够 生成 更 智能 的 搜索 结果 。 
【示例 1】 下 面 示例 演示 如 何 定义 时 间 和 日 期 。 
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<p> 我 们 每 天 早上 <time>9:00</time> 打卡 上 班 。</p> 
<p> 我 在 <time datetime="2018-02-14"> 情 人 节 </time> 有 个 约会 。</p> 


【拓展 】 
人 | time 元 素 定义 了 两 个 属性 ， 简 单 说 明 如 下 : 
| datetime: 规定 日 期 和 时 间 的 格式 。 否 则 ， 由 元 素 的 内 容 给 定 日 期 和 时 间 。 
pubdate: 定义 time 元 素 中 的 日 期 和 时 间 是 文档 或 article 内 容 的 发 布 日 期 。 


| 【示例 2】time 元 素 可 以 定义 很 多 格式 的 日 期 和 时 间 。 

<time datetime="2017-11-13">2017 年 11 月 13 日 <time> 

<time datetime="2017-11-13">11 月 13 日 </time> 

<time datetime="2017-11-13"> 我 的 生日 <time> 

<time datetime="2017-11-13T20:00"> 我 生日 的 晚上 8 点 </time> 

<time datetime="2017-11-13T20:00Z"> 我 生日 的 晚上 8 点 </time> 

<time datetime="2017-11-13T20:00+09:00"> 我 生日 的 晚上 8 点 的 美国 时 间 </time> 


| 浏览 器 通过 datetime 属性 获取 time 的 时 间 ， 而 time 开始 标记 与 结束 标记 中 间 的 部 分 是 显示 在 网 
| 页 上 的 。datetime 属性 中 日 期 与 时 间 之 间 要 用 “T” 文 字 分 隔 ,“T” 表 示 时 间 。 


< 拟 注意 ; 倒数 第 二 行 ， 时 间 加 上 也 文字 表示 给 机 器 编码 时 使 用 UTC 标准 时 间 ， 倒 数 第 一 行 则 加 上 
了 时 差 ， 表 示 向 机 器 编码 另 一 地 区 时 间 ， 如 果 是 编码 本 地 时 间 ， 则 不 需要 添加 时 差 。 


| 
| 
| 
| 
| 
| 
| 
| 
| pubdate 属性 是 一 个 可 选 的 布尔 值 属性 ， 它 可 以 用 在 article 元 素 中 的 time 元 素 上 , 意思 是 time 元 
| 素 代表 了 文章 (article 元 素 的 内 容 ) 或 整个 网 页 的 发 布 日 期 。 注 意 ，HTMLS 新 标准 不 再 支持 pubdate 
| 

| 属性 。 

| 【示例 3】 下 面 示例 使 用 pubdate 属性 为 文档 添加 引擎 检索 的 发 布 日 期 。 

| artide> 

| <header> 

| 
| 
| 
| 
| 
| 
| 
| 


<hl> 首 届 Web 高 层 论坛 《Web Executive Forum) 将 于 2017 年 11 月 在 美国 旧金山 举行 </hl> 
<p> 发 布 日 期 <time datetime="2017-9-26" pubdate>2017 年 9 月 26 日 消息 </time></p> 


<p> 来 自 <a hre 全 "http://www.chinaw3c.org/archives/1980/" target=" blank">W3C 中 国 </a></p> 
</footer> 
</article> 


由 于 time 元 素 不 仅仅 表示 发 布 时 间 ， 而 且 还 可 以 表示 其 他 用 途 的 时 间 ， 如 通知 、 约 会 等 。 
【示例 4】 为 了 避免 引擎 误解 发 布 日 期 ， 使 用 pubdate 属性 可 以 显 式 告诉 引擎 文章 中 哪个 是 真正 





<hl> 首 届 Web 高 层 论坛 (Web Executive Fomm) 将 于 2017 年 11 月 在 美国 旧金山 举行 <hl> 
<p> 发 布 日 期 <time datetime="2017-9-26" pubdate>2017 年 9 月 26 日 消息 </time></p> 

| <p> 关 于 <time datetime=2017-10-1>10 月 1 日 </time> 参 会 紧急 通知 </p> 

| </header> 
| <p>...</p> 
| <footer> 
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<p> 来 自 <a hre 伟 "http://www-chinaw3c.org/archives/1980/" target=”blank">W3C 中 国 </a></p> | 
</footer> 
</article> 


在 这 个 例子 中 ， 有 两 个 time 元 素 ， 分 别 定义 了 两 个 日 期 紧急 通知 日 期 和 发 布 日 期 。 由 于 都 使 | 
用 了 time 元 素 ， 所 以 需要 使 用 pubdate 属性 表明 哪个 time 元 素 代表 了 新 闻 的 发 布 日 期 。 | 


2.3.3 figure 和 figcaption 一 一 流 媒 体 


figure 元 素 可 以 定义 独立 的 流 内 容 ， 如 图 像 、 图 表 、 照 片 、 代 码 等 。figure 元 素 的 内 容 应 该 与 主 
内 容 相 关 ， 但 如 果 被 删除 ， 则 不 会 对 文档 产生 影响 。 
figcaption 元 素 表 示 figure 元 素 的 标题 ， 它 从 属于 figure 元 素 ， 必 须 书 写 在 figure 元 素 内 部 ， 可 以 
书写 在 figure 元 素 内 的 其 他 从 属 元 素 的 前 面 或 后 面 。 一 个 figure 元 素 内 最 多 只 允许 放置 一 个 figcaption 
元 素 ， 但 允许 放置 多 个 其 他 元 素 。 
【示例 1】 下 面 示例 设计 一 个 不 带 标题 的 figure 元 素 。 
<figure> 
<img sre="images/1jpg” width="400" alt=" 学 生 "> 
</figure> 
【示例 2】 下 面 示例 设计 一 个 带 标题 的 figure 元素， 标题 使 用 figcaption 元 素 定义 。 
<figure> 
<img src="images/1.jpg” width="400" alt=" 学 生 "> | 
<figcaption> 大 学 生 </figcaption> 
/figure> 


【示例 3】 下 面 示例 设计 为 多 幅 图 片 设计 使 用 同一 个 标题 ， 演 示 效果 如 图 2.1 所 示 。 


<figure> 
<img src="images/1.jpg" height="150" alt=" 学 生 "> 
<img src="images/2.jpg" height="150" alt=" 学 生 "> 
<img src="images/3.jpg" height="150" alt=" 学 生 "> 
<figcaption> 大 学 生 </figcaption> 

</figure> 








D ontonanaomnr x NN 
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| 





图 2.1 多 个 图 片 使 用 同一 个 标 是 
2.3.4 ”details 和 summary 一 一 详细 内 容 


details 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 ， 被 details 标识 的 内 容 可 以 展开 或 收缩 显示 。 
details 可 以 包含 文字 、 表 单 、 插 件 或 表格 等 任何 超 文本 信息 。 
details 包含 一 个 open 属性 ， 取 值 为 布尔 值 ， 当 该 属性 值 为 tue 时 ， 其 包含 的 子 元 素 应 该 展开 显 





| 
| 
| 
人 
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| > 
| 示 ; 当 该 属性 值 为 false 时 ， 其 包含 的 子 元 素 应 该 收缩 起 来 不 显示 。open 属性 的 默认 值 为 flse， 页 面 
| 打开 时 ， 其 内 部 子 元 素 处 于 收缩 状态 。 
| summary 元 素 为 details 的 子 元 素 ， 可 以 为 details 定义 标题 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 ， 
天 7 | 会 显示 出 details 包含 的 信息 。 
全 | 【示例 1】 下 面 示例 使 用 details 和 summary 元 素 设计 折 短 面板 效果 ， 演 示 如 图 2.2 所 示 。 




















CO localhost 


> 大 学 生 





(a) 默认 收缩 显示 (b) 单 击 展开 显示 
2.2 使 用 details 和 summary 元 素 设计 折 县 面板 


【示例 2】 如 果 details 元 素 内 没有 summary 元 素 ， 浏 览 器 会 提供 默认 文字 以 供 单 击 ， 例 如 ， 
“details” 或 某 些 本 地 化 文字 ， 如 “详细 信息 ”浏览 器 也 提供 一 个 诸如 上 下 箭头 一 类 的 图 标 ， 标 示 该 
区 域 可 以 展开 或 收缩 ， 效 果 如 图 2.3 所 示 。 

<details> 
<figure> 
<img src="images/1.jpg" width="300" alt=" 学 生 "> 


当 details 元 素 的 状态 从 展开 切换 为 收缩 ， 或 从 收缩 切换 为 展开 时 ， 均 触发 toggle 事件 。 
【示例 3】 下 面 示例 设计 当 用 户 切 换 details 元 素 显示 或 隐藏 显示 时 ， 取 消 summary 元 素 轮廓 效 
| 果 ， 并 给 details 元 素 包含 的 内 容 加 一 个 边框 ， 效 果 如 图 2.4 所 示 。 


| <summary> 大 学 生 </summary> 
| <figure id="info"> 
| <img src="images/1.jpg" width="300" alt=" 学 生 "> 


Var detail=document.getElementById('detail"): 
Var info=document.getElementById('info"): 
var summary=detail.getElementsByTagName(summary')[0]: 
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detail.ontoggle = functionO{ 
if(this.open){ 





info.style.border="solid 1px red"; 


summary.style.outline="none"; 
Jelse{ 


info.style.border="solid 1px #fff' 


} 
b 
</script> 








图 2.3 使 用 details 设计 折 肥 面板 图 2.4 取消 标题 轮廓 线 


你 提示 : 目前 ，IE 浏览 器 暂 不 支持 details 和 summary 元 素 。 


2.3.5 mark 一 一 记号 文本 


mark 元 素 用 来 定义 带 有 记号 的 文本 ， 它 表示 页 面 中 需要 临时 高 亮 显示 的 信息 ， 对 于 当前 浏览 者 
来 说 具有 提示 作用 。 例 如 ， 在 网 页 中 检索 某 个 关键 词 时 ， 呈 现 匹 配 的 检索 结果 ， 现 在 很 多 搜索 引擎 都 


用 类 似 方法 实现 了 mark 元 素 的 功能 。 


【示例 1】 下 面 示例 使 用 mark 元 素 高 亮 显示 “HTML5” 关 键 词 ， 演 示 效 果 如 图 2.5 所 示 。 


EP 


2014 年 10 月 28 日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTML5 的 正式 推荐 标准 (W3C Recommendation)。 


W3C 在 美国 圣 克 拉 拉 举 行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 宣布 了 这 一 消息 。 HTML5 是 万 | 


维 网 的 核心 语言 一 一 可 扩展 标记 语言 的 第 5 


<p> 
<script> 











版 。 在 这 一 版 本 中 ， 增 加 了 支持 Web 应 用 开发 者 的 许多 新 特性 ， 以 | 
及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 用 户 | 
代理 〈 浏 览 器 ) 中 的 互 操作 性 。HITMLS 是 构建 开放 Web 平台 的 核心 。 


Var ps = document.getElementsByTagName("p"): 


Array.prototype.forEach.call(ps.function(p){ 


p.innerHTML = p.innerHTML replace(HIMLS/g. fonction(htmD){ 
retum "<mark>"+ html +"</mark>" 


D 
D 
</scrip> 


在 上 面 脚本 中 ， 获 取 页 面 中 所 有 正文 文本 ， 然 后 使 用 数组 对 象 的 forEach0 方 法 迭代 每 个 p 元 素 ， | 


使 用 字符 串 对 象 的 replace0 方 法 ， 通 过 


E 则 表达 式 匹配 到 正文 中 所 有 的 “HIML5” 关 键 词 ， 把 它 蔡 换 





为 “<mark> HTML5</mark>” 的 HTML 字符 串 进 行 显 示 。 
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| 【示例 2】mark 元 素 还 可 以 用 于 标记 引文 ， 为 特殊 目的 把 原文 作者 没有 重点 强调 的 内 容 标 记 出 
| 来 。 下 面 示例 使 用 mark 元 素 标记 唐诗 中 韵脚 字 ， 方 便 浏览 者 浏览 ， 效 果 如 图 2.6 所 示 。 
Fe <article> 
<h2> 静 夜 思 </h2> 

全 <h3> 李 白 </h3> 

<p> 床 前 明月 <mark> 光 </mark>， 疑 是 地 上 <mark> 霜 </mark>。</p> 

<p> 举 头 望 明 月 ， 低 头 思 故 <mark> 乡 </mark>。</p> 
| </article> 
| D localhosvao80/mysite x 
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2014 年 10 月 28 日 ，W3CH9HTML 工 作 组 正式 发 布 了 HTML5 的 正 
式 推荐 标准 ( W3C Recommendation ) 。W3C 在 半 | 


委员 会 


床 胃 明 月 光 ， 妖 是 地 上 霜 , 


， 代理 
的 互 把 作 性 。HTML5 是 构建 开放 Web 平 台 的 核心 举 头 户 明月， 低头 思 故 细 . 





图 2.5 使 用 mark 元 素 高 亮 显示 关键 词 图 2.6 使 用 mark 元 素 高 亮 显示 韵脚 


【辨析 】 

| 在 HTML4 中 , 用 户 习 惯 使 用 em 或 strong 元 素来 突出 显示 文字 , 但 是 mark 元 素 的 作用 与 这 两 个 
| 元 素 的 作用 是 有 区 别 的 ， 不 能 混用 。 

| mark 元 素 的 标记 目的 与 原文 作者 无 关 ， 或 者 说 它 不 是 被 原文 作者 用 来 标示 文字 的 ， 而 是 后 来 被 
| 引用 时 添加 上 去 的 。 它 的 目的 是 吸引 当前 用 户 的 注意 力 ,供用 户 参 考 , 希 望 能 够 对 用 户 有 帮助 而 strong 
| 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 的 ， 如 错误 信息 等 ，em 元 素 是 作者 为 了 突出 文章 重点 文字 而 
| 使 用 的 。 


2.3.6 ”progress 一 一 进度 条 


视频 讲解 progress 元 素 定义 任务 的 进度 或 进程 。 这 个 进度 可 以 是 不 确定 的 ， 表 示 进 度 正在 进行 ， 但 不 清楚 
还 有 多 少 进度 没有 完成 ， 也 可 以 用 0 到 某 个 最 大 数字 (如 100) 之 间 的 数字 来 表示 进度 完成 情况 。 一 
般 与 JavaScript 一 同 使 用 ， 来 动态 显示 任务 的 进度 。 
progress 元 素 包含 两 个 属性 ， 简 单 说 明 如 下 : 
max: 规定 任务 一 共 需 要 多 少 工作 。 
value: 规定 已 经 完成 多 少 任务 。 
在 设置 属性 的 时 候 ，value 和 max 属性 只 能 指定 为 有 效 的 浮 点 数 ，value 属性 的 值 必须 大 于 0、 小 
于 或 等 于 max 属性 的 值 ，max 属性 的 值 必须 大 于 0。 
【示例 】 下 面 示例 简单 演示 了 如 何 使 用 progress 元 素 ， 演 示 效 果 如 图 2.7 所 示 。 
<section> 
<p> 百 分 比 进度 : <progress id="progress" max="100"><span>0</span>%</progress></p> 
<input type="button" onclick="click10” value=" 显 示 进 度 "人 > 
</section> 
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progress.getElementsByYTagName(span')[0].textContent ="0"; 
for(var i=0:i<=100;i++) 





updateProgress(): 
} 
function updateProgress(newValue){ 
Var progress = document.getElementById('progress"):; | 
progress.value = newValue:; 
Pprogress.getElementsByTagName('span')[0].textContent = newValue: 
} | 


</script> | 





图 2.7 使 用 progress 元 素 


< 似 注意 : progress 元 素 不 适合 用 来 表示 度量 衡 ， 例 如 磁盘 空间 使 用 情况 或 查询 结果 。 如 需 表示 度量 
衡 ， 应 使 用 meter 元 素 。 


2.3.7 meter 一 一 度量 


meter 元 素 定义 已 知 范围 或 分 数值 内 的 标量 测量 。 例 如 ， 磁 盘 用 量 、 查 询 结果 的 相关 性 等 。 

注意 ，meter 元 素 不 应 用 于 指示 进度 ， 如 果 标 记 进度 条 ， 应 使 用 progress 元 素 。 

meter 元 素 包 含 7 个 属性 ， 简 单 说 明 如 下 : 

form: 规定 <meter> 元 素 所 属 的 一 个 或 多 个 表单 。 

high: 规定 被 视 作 高 的 值 的 范围 。 如 果 小 于 low 属性 值 ， 那 么 使 用 low 属性 值 ， 如 果 大 于 
max 属性 值 ， 那 么 使 用 max 属性 值 。 

low: 规定 被 视 作 低 的 值 的 范围 。 必 须 小 于 或 等 于 high 属性 值 。 如 果 小 于 min 属性 值 ， 那 么 
使 用 min 属性 值 。 

max: 规定 范围 的 最 大 值 。 默 认为 1， 如 果 小 于 min 属性 值 ， 那 么 使 用 min 属性 值 。 | 

min: 规定 范围 的 最 小 值 。 默 认为 0， 不 能 小 于 0。 | 






































optimum: 规定 度量 的 优化 值 。 必 须 在 min 和 max 属性 值 之 间 ， 可 以 大 于 high 属性 值 。 
value: 必需 ， 规 定 度量 的 当前 值 。 默 认为 0， 可 以 指定 一 个 浮 点 小 数值 。 | 
【示例 】 下 面 示例 简单 演示 了 如 何 使 用 meter 元 素 ， 效 果 如 图 2.8 所 示 。 | 
<meter value="3" min="0" max="10"> 十 分 之 三 </meter> 
<meter value="0.6">60%</meter> 
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图 2.8 使 用 meter 元 素 
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Yo 
窑 提示 : 目前 ,下 浏览 器 暂 不 支持 该 元 素 ， 仅 显示 其 包含 的 文本 。 


| 2.3.8 dialog 一 一 模 态 对 话 框 


| dialog 元 素 定义 对 话 框 或 窗口 。 在 默认 状态 下 ，dialog 元 素 处 于 隐藏 状态 ， 可 以 在 JavaScript 脚 
| 本 中 使 用 show() 方 法 显示 dialog 元 素 ， 可 以 使 用 close0 方 法 隐藏 dialog 元 素 。 
dialog 元 素 包含 open 属性 ， 用 来 设置 dialog 元 素 打开 ， 用 户 可 与 之 交互 。 
【示例 1】 下 面 示例 演示 了 一 个 打开 的 对 话 框 ， 效 果 如 图 2.9 所 示 。 
<dialog open> 打 开 的 对 话 框 </dialog> 












图 2.9 打开 的 对 话 


【示例 2】 下 面 示例 演示 了 如 何 使 用 JavaScript 脚本 控制 对 话 框 的 显示 或 隐藏 。 


<style> 
#dg { width: 60%;: text-align: center: } 
#dg label {display:block; margin:6px:} 
:backdrop { background-colorblack:} 
</style> 
<input id="btn" type="button" value=" 打 开 对 话 框 "> 
<dialog id="dg"> 
<h2> 用 户 登 录 </h2> 
<main> 
<form> 
<label for="txtName" value=" 用 户 名 : "> 
<input type="text" id="txtName"/> 
</label> 
<label for="txtPassword" value=" 密 ” 码 :"/> 
<input type="password" id="txtPassword" autofocus/> 
</label> 
<input type="button" value=" 登 录 " /> 
<input id="cls" type="button" value=" 关 闭 " /> 
</form> 
</main> 
</dialog> 
<script> 
Var btn = document.getElementById("btn"): 
Var dg = document.getElementById("dg"): 
Var cls = document.getElementById("cls"): 
btn.onclick = functionO{ 
dg.showModalO: 
dgIretumValue=' 对 话 框 的 值 ': 
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cls.onclick = fonctionO{ | 
dg.closeO: 
console.log( dg .returmnValue ): 
} 
dg.onclose = functionO{ 
console.log(' 对 话 框 被 关闭 "); 
} 
dg.oncancel = functionO{ ' 
console.log(' 用 户 在 模 态 窗口 中 按 下 Esc 键 '); | 
} | 
</script> | 
在 示例 页 面 中 ， 显 示 一 个 “打开 对 话 框 ”按钮 ， 页 面 打开 时 dialog 元 素 处 于 隐藏 状态 ， 单 击 “ 打 | 
开 对 话 框 ”按钮 后 ，dialog 元 素 变 为 显示 状态 。dialog 元 素 中 放置 一 个 “关闭 ”按钮 ， 单 击 该 按钮 后 
dialog 元 素 变 为 隐藏 状态 ， 效 果 如 图 2.10 所 示 。 








(a) 默认 状态 (b) 打开 状态 
图 2.10 ”打开 对 话 框 


在 上 面 代 码 中 ， 可 以 使 用 dialog 元 素 的 showModal0 方 法 以 模式 对 话 框 的 形式 显示 dialog 元 素 ; 
如 果 要 在 页 面 打 开 时 即 显示 dialog 元 素 ， 可 以 使 用 dialog 元 素 的 open 属性 ; 可 以 使 用 dialog 元 素 的 | 
retumValue 属性 为 对 话 框 设置 或 返回 一 个 返回 值 。 


党 提示 : 目前 ，Chrome 和 Opera 新 版 本 浏览 器 对 其 提供 完全 支持 ， Firefox 新 版 本 支持 基本 功能 。 | 
2.3.9 bdi 一 一 隔离 文本 


bdi 元 素 允 许 设置 一 段 文 本 ， 使 其 脱离 其 父 元 素 的 文本 方向 设置 。 在 发 布 用 户 评论 或 其 他 无 法 完 
全 控制 的 内 容 时 ， 该 标签 很 有 用 。 
【示例 】 下 面 示例 将 用 户 名 从 周围 的 文本 方向 设置 中 隔离 出 来 。 

<u> 
<li> 用 户 <bdi>admin</bdi>: 70 分 </li> 
<li> 用 户 <bdi>lisi</bdi>: 80 分 </i> 
<1i> 用 户 <bdi>zhangsan</bdi> : 90 分 <li> 

< 


目前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 bdi 元 素 。 
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| 2.3.10 ”wbr 一 一 换行 断 点 

| wbr 元 素 定义 在 文本 中 的 何 处 适合 添加 换行 符 。 如 果 单 词 太 长 ， 或 者 担心 浏览 器 会 在 错误 的 位 置 
全 内 换行 ， 那 么 可 以 使 用 wbr 元 素来 添加 单词 换行 点 ， 避 免 浏 览 器 随意 换行 。 

RR 目前 ， 除 了 正 浏览 器 外 ， 其 他 主流 浏览 器 都 支持 wbr 元 素 。 

pte 【示例 】 下 面 示例 为 URL 字符 串 添 加 换行 符 标签 ， 这 样 当 窗 口 宽 度 变 化 时 ， 浏 览 器 会 自动 根据 
断 点 确定 换行 位 置 ， 效 果 如 图 2.11 所 示 。 





| <p> 本 站 旧地 址 为 : https:<wbr>//<wbr>www.old_site.com/, 新 地 址 为 : https:<wbr>//<wbr>www.new_site.com/。 
| > 
| 


© GEE] Fr 
本 站 旧地 址 为 ，hmps/fwww.old_site com/， 新 地 址 为 ， 
hy Site.com/- 


pe /Wwew_site e 本 中 [9 地 站 为 He olal_site com/， 新 坟 直 为，httpe; 


/rm ren_oite. con/« 





(a) 正中 换行 断 点 无 效 (b) Chrome 中 换行 断 点 有 效 
图 2.11 定义 换行 断 点 


2.3.11 ruby、rt、rp 一 一 文本 注释 


| ruby 元 素 可 以 定义 ruby 注释 ， 如 在 汉字 顶部 添加 拼音 。mby 元 素 需 要 与 rt 或 tp 元 素 配合 使 用 ， 
| 其 中 tt 和 二 元 素 必须 位 于 mby 元 素 内 。 
| 加 ”tt 元 素 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 。 

加 ”1p 元 素 定义 备用 显示 内 容 ， 即 当 浏 览 器 不 支持 ruby 元 素 时 的 显示 内 容 。 

【示例 】 下 面 示例 演示 如 何 使 用 mby 和 rt 元 素 为 唐诗 诗句 注音 ， 效 果 如 图 2.12 所 示 。 

<style type="text/css"> 
ruby { font-size: 40px: } 
</style> 
<mby> 
少 <rf>shao</rt> 小 <rf>xiio</rt> 离 <rP>li</rt> 家 <rt>jii</rt> 老 <rt>lio</rP> 大 <rP>da</rt> 回 <rt>hui<irt> 
</mby>, 
| 
| A 
| 
| 








DD locahoctnesi hil x 
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shaoxiao Ii jia li0 da hui 


少 小 离 家 老大 回 


xiang yin w gai bin mao cui 


乡音 无 改 竺 毛 豪 








图 2.12 给 唐诗 注音 
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2.3.12 ” command 一 一 菜单 命令 


| 
在 HIML5 中 被 HTML4 弃 用 的 menu 元 素 被 重新 定义 .使 用 menu 元 素 可 以 定义 命令 的 列表 或 菜 | 
单 ， 如 上 下 文 菜单 、 工 具 栏 ， 以 及 列 出 表单 控件 和 命令 。menu 元 素 中 可 以 包含 command 和 menuitem | 全 办 
元 素 ， 用 于 定义 命令 和 项 目 。 | 一 一 
【示例 1】 下 面 示例 配合 使 用 menu 和 command 元 素 ， 定 义 一 个 命令 ， 当 单 击 该 命令 时 ， 将 弹出 

提示 对 话 杠 ， 如 图 2.13 所 示 。 
<menu> | 
<command onclick="alert(Hello World)"> 命 令 </command> ! 

</menu> 











图 2.13 定义 菜单 命令 
command 元 素 可 以 定义 命令 按钮 ， 如 单 选 按钮 、 复 选 框 或 按钮 。 只 有 当 command 元 素 位 于 menu 
元 素 内 时 ， 该 元 素 才 是 可 见 的 。 和 否则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 定义 键盘 快捷 键 。 
目前 ， 只 有 下 9 (更 早 或 更 晚 的 版 本 都 不 支持 ) 和 Firefox 支持 command 元 素 。 
command 元 素 包含 很 多 属性 ， 专 门 用 来 定制 命令 的 显示 样式 和 行为 ， 说 明 如 表 2.1 所 示 。 


表 2.1 command 元 素 属性 














属 性 说 了 明 
checked 定义 是 否 被 选中 。 仅 用 于 radio 或 checkbox 类 型 

disabled 定义 command 是 否 可 用 | 
icon 定义 作为 command 来 显示 的 图 像 的 ul | 
label 为 command 定义 可 见 的 label | 
radiogroup 定义 command 所 属 的 组 名 。 仅 在 类 型 为 radio 时 使 用 | 
i checkbox、command、 定义 该 command 的 类 型 。 默 认 值 为 "command" | 


Tadio 








【示例 2】 下 面 示例 使 用 command 元 素 各 种 属性 定义 一 组 单 选 按钮 命令 组 ， 演 示 效 果 如 图 2.14 
所 示 。 目 前 还 没有 浏览 器 完全 支持 这 些 属性 。 

<menu> | 

<command icon="images/1.png” onclick="alert(' 男 士 )" type="radio" radiogroup="group1" label=" 男 士 "> 男 | 

士 </command> 

<command icon="images/2.png"” onclick="alert( 女士 )" type="radio" radiogroup="groupl" label=" 女 士 "> 女 | 

士 </command> 

<command icon="images/3.png" onclick="alert( 未 知 )" type="radio" radiogroup="groupl" label=" 未 知 "> 未 尖 
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知 </command> 
| </menu> 
| menu 元 素 也 包含 两 个 专用 属性 ， 简 单 说 明 如 下 : 
食 内 label: 定义 菜单 的 可 见 标签 。 
ee 加 ”type: 定义 要 显示 哪 种 菜单 类 型 ， 取 值 说 明 如 下 : 
Note > ”list: 默认 值 ， 定 义 列表 菜单 。 一 个 用 户 可 执行 或 激活 的 命令 列表 (元 素 ) 。 


> ”context; 定义 上 下 文 菜单 。 该 菜单 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激活 。 

> ”toolbar: 定义 工具 栏 菜单 。 活 动 式 命令 ， 人 允许 用 户 立即 与 命令 进行 交互 。 
【示例 3】 下 面 示例 使 用 type 属性 定义 了 两 组 工具 条 按钮 ， 演 示 效 果 如 图 2.15 所 示 。 
<menu type="toolbar"> 

<> 


<menu label="File" type="toolbar"> 
<button type="button" onclick="file_ newO"> 新 建 …</button> 
<button type="button" onclick="fle_ open0"> 打 开 …</button> 
<button type="button" onclick="fille save0"> 保 存 </button> 
</menu> 


$$ 


<menu label="Edit" type="toolbar"> 
<button type="button" onclick="edit_cutO"> 剪 切 </button> 
<button type="button" onclick="edit_copy0"> 复 制 </button> 
<button type="button" onclick="edit_ paste0"> 粘 贴 </button> 


hapWiocaihocyaesaahtml 。 


cahosuectheryl 加 识 cj» 三 


EE 
区 轨 | | 各 抽 | 类 





| 图 2.14 定义 单 选 按钮 命令 组 图 2.15 定义 工具 条 命令 组 
| 
| 
| 


2.4 完善 加 元 素 


HTMLS5 对 HIML4 部 分 元 素 进行 了 优化 ， 有 具体 说 明 如 下 。 
| 2.4.1 a 一 一 超 链接 


HIML5 为 a 元 素 新 增 了 3 个 属性 ， 简 单 说 明 如 下 : 
回 。 download: 设置 被 下 载 的 超 链接 目标 。 
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media: 设置 被 链接 文档 是 被 何 种 媒介 /设备 优化 的 。 
type: 设置 被 链接 文档 的 MIME 类 型 。 
【示例 】 下 面 示例 使 用 download 属性 设计 图 片 被 单 击 后 ， 直 接 下 载 ， 而 不 是 在 新 窗口 中 显示 ， 
效果 如 图 2.16 所 示 。 


<a href="images/1.jpe" download="images/] .jpe"><imeg src="images/1.jpg"/></a> 





图 2.16 单 击 下 载 图 片 
容 提示 : 目前， Chrome、Opera 和 Firefox 版 本 的 浏览 器 均 支持 该 属性 ，IE 暂 不 支持 。 


2.4.2 ol 一 一 有 序列 表 


HTML5 为 ol 元 素 新 增 了 reversed 属性 ， 用 来 设置 列表 顺序 为 降序 显示 。 
【示例 】 下 面 示例 使 用 reversed 属性 设计 列表 项 目 按 倒序 显示 ， 效 果 如 图 2.17 所 示 。 


<ol reversed> 
<li>compact</li> 
Se 1 
<li>start</li> 
<li>type</li> 
</ol> 





D lecahortceymcte x 玫 
己 |@ localhost 





4. compact | 
3. reversed | 
2. start | 
1type 





图 2.17 项 目 列表 倒序 显示 


这 提示 : 目前， 最 新 版 本 的 Chrome、Opera、Firefox 浏览 器 均 支持 该 属性 ，JE 暂 不 支持 。 





2.4.3 dl 一 一 定义 列表 


| 
| 
HTMLS 重新 定义 了 dl 元素 , 允许 dl 列表 包含 多 个 带 名 字 的 列表 项 。 每 一 项 包含 一 条 或 多 条 带 名 | 


| 视频 讲 
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各 As 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| 字 的 生 元 素 ， 用 来 表示 术语 ， 忆 元 素 后 面 紧 跟 一 个 或 多 个 dd 元 素 ， 用 来 表示 定义 。 在 一 个 元 素 内 ， 
| 不 允许 有 相同 名 字 的 dt 元 素 ， 即 不 允许 有 重复 的 术语 。 

【示例 】 下 面 示例 演示 了 如 何 使 用 dl 元 素 对 诗句 进行 逐 句 解析 ， 效 果 如 图 2.18 所 示 。 
<h3>《 静 夜 思 》 赏 析 </h3> 


<d> 
Note <dt><dfn> 床 前 明月 光 ， 疑 是 地 上 霜 。</dfn></dt> 
<dd> 诗 的 前 两 句 ， 是 写 诗人 在 作客 他 乡 的 特定 环境 中 一 刹那 间 所 产生 的 错觉 。</dd> 





| <dt><dfn> 举 头 望 明月 ， 低 头 思 故 乡 。</dfn></dt> 

| <dd> 诗 的 后 两 句 ， 则 是 通过 动作 神态 的 刻画 ， 深 化 思乡 之 情 。</dd> 
| </d> 

| 


Docsihorscsoimyris x 忆 、 


© © Ilocalhost8080/mysite/testl.html 


《静夜 思 )》 赏 析 


不 勒 阿 5 光 , 知 E 姓 /上 圭 

诗 的 前 两 句 ， 是 写 诗人 在 作客 他 乡 的 特定 环境 中 一 利于 间 所 产生 的 财 党 。 
洒 尺 银 风 有 户 ， 克 头 呈 玫 筷 

读 的 后 两 句 ， 则 是 通过 动作 神志 的 列 画 ,深化 思乡 之 依 , 





图 2.18 定义 列表 项 目的 应 用 
2.4.4 cite 一 一 引用 文本 


cite 元 素 表示 引用 参考 ， 如 书籍 或 者 杂志 的 标题 。 按 照 惯例 ， 引 用 的 文本 将 以 斜体 显示 。 一 般 应 
把 引用 文本 包 庄 在 a 元 素 中 ， 方 便 用 户 快速 跳 转 到 原 出 处 。 
cite 元 素 还 有 一 个 隐藏 的 功能 : 可 以 从 文档 中 自动 摘录 参考 书目 。 浏 览 器 能 够 自动 整理 引用 表格 ， 
并 把 它们 作为 脚注 或 者 独立 的 文档 来 显示 。 
cite 元 素 的 语义 已 经 超过 了 改变 它 所 包含 的 文本 外 观 的 作用 ， 它 使 浏览 器 能 够 以 各 种 实用 的 方式 
来 向 用 户 表达 文档 的 内 容 。 
【示例 】 下 面 示例 简单 演示 了 cite 元 素 的 应 用 ， 效 果 如 图 2.19 所 示 。 
<p> 朱 词 是 一 种 相对 于 古 体 诗 的 新 体 诗歌 之 一 ， 标 志 宋代 文学 的 最 高 成 就 。 宋 词句 子 有 长 有 短 ， 便 于 歌唱 。 
因 是 合 乐 的 歌词 ， 故 又 称 曲 子 词 、 乐 府 、 乐 章 、 长 短 句 、 诗 余 、 琴 趣 等 。</p> 
<p> 来 自 百 度 百科 <a href="https://baike.baidu.comyitem/%E5%AE%8B%E8%AF%8D/365879?fr=aladdin" 
target="blank"><cite> 宁 词 <Jcite></a></p> 
| 
| 
| D localhost8080/mysite x 
LO bahost oommyste/ est? hn | 
宋词 是 一 种 相对 于 古 体 诗 的 新 体 诗歌 之 一 ， 标 志 宋代 文学 的 最 高 成 
就 。 宋 词句 子 有 长 有 短 ， 便 于 歌唱 。 因 是 合 乐 的 歌词 ， 故 又 称 曲子 


词 、 乐 府 、 乐 章 、 长 短 句 、 诗 余 、 琴 趣 等 , 
warenay 





_baidu.com/_/36587927f. 





图 2.19 使 用 cite 元 素 
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2.4.5 small | 


small 元 素 本 来 用 来 定义 小 号 字体 效果 , HTMLS5 对 其 进行 了 重新 定义 , 使 其 由 原来 的 通用 展示 性 | 
元 素 变 为 更 具体 的 、 专 门 用 来 标识 所 谓 “小 字 印 刷 体 ”的 元 素 ， 通 常用 在 诸如 免责 声明 、 注 意 事项 、 | 
法 律 规 定 、 与 版 权 相 关 等 法 律 性 声明 文字 中 ， 同 时 不 允许 应 用 在 页 面 主 内 容 中 ， 只 允许 被 当 作 辅助 信 | 
息 ， 以 inline 方式 内 媒 在 页 面 上 。 

同时 ，small 元 素 也 不 意味 着 元 素 中 内 容 字体 会 变 小 ， 要 将 字体 变 小 ， 需 要 使 用 CSS 样式 表 。 


2.4.6 iframe 一 一 浮动 框架 | 


HTML5 主要 从 安全 性 方面 增强 过 ame 元 素 ， 新 增 了 3 个 属性 ， 简 单 说 明 如 下 : 
sandbox: 启用 一 系列 对 过 ame 中 内 容 的 额外 限制 ， 取 值 包括 : ""、allow-forms (允许 表单 | 
提交 )、allow-same-origin( 人 允许 同 源 访问 )、allow-scripts( 允许 执行 脚本 )、allow-top-navigation | 
〈 人 允许 框架 访问 ) 。 
seamless: 定义 iframe 看 上 去 像 是 包含 文档 的 一 部 分 ， 取 值 为 seamless (无 颖 嵌入 ) ， 或 者 | 
不 设置 。 
srcdoc: 规定 在 fame 中 显示 的 HTML 内 容 ， 取 值 为 HTML 代码 。 
HTMLS5 为 frame 元 素 增加 sandbox 属性 ， 是 出 于 安全 性 方面 的 原因 ， 对 这 ame 元 素 内 的 内 容 是 
否 允 许 显 示 ， 表 单 是 否 允 许 被 提交 ， 以 及 脚本 是 否 允许 被 执行 等 方面 进行 一 些 限 制 。 
通过 设置 fame 元 素 的 sandbox 属性 ，iframe 元 素 内 显示 的 页 面 被 添加 如 下 所 示 的 限制 。 
该 页 面 中 的 插件 被 禁用 。 
该 页 面 中 的 表单 被 禁止 提交 。 
该 页 面 中 的 JavaScript 脚本 代码 被 禁止 运行 。 
如 果 单 击 该 页 面 内 的 超 链接 ， 将 把 浏览 器 窗口 或 这 ame 元 素 之 外 的 任何 内 容 导航 到 frame， 
则 该 超 链接 被 禁用 。 
该 页 面 被 视 为 来 自 一 个 单独 的 源 ， 所 以 禁止 加 载 该 页 面 中 来 自 服务 器 端的 内 容 ， 禁 止 该 页 
面 与 服务 器 端 进行 交互 ， 同 时 禁止 加 载 页 面 中 从 Cookie 或 Web Storage 中 读 出 的 内 容 。 


窑 提示 : sandbox 属性 允许 指定 多 个 属性 值 ， 属 性 值 与 局 性 值 中 间 用 空格 分 隔 。 





小 号 字体 











加 图 图 加 


加 





2.4.7 ”script 一 一 脚本 


| 
HTML5 为 script 元 素 新 增 asyne 属性 ， 规 定 异步 执行 脚本 ， 仅 适用 于 外 部 脚本 ， 取 值 为 asyne。 | 视频 讲解 
【示例 1】 下 面 示例 演示 了 asyne 属性 的 应 用 。 


<script SIc="testl.js" async onload="ok0"></script> 





<script> 
console.log(" 内 部 脚本 "); 
</scrip> 


设计 在 页 面 中 导入 外 部 脚本 文件 test1.js， 该 文件 的 代码 如 下 : 
console.log(" 外 部 脚本 "): 


} 
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视频 讲解 








a 2 wm 浊 捕 通 (共处 本 遇 夺 ) 


在 Chrome 浏览 器 中 预览 ， 可 以 看 到 页 面 内 部 脚本 先 被 执行 ， 最 后 才 执行 异步 导入 的 脚本 文件 代 
码 ， 效 果 如 图 2.20 所 示 。 


DD eealhosnestlhtml x 


© [©@ locahost/testl ht 





图 2.20 异步 加 载 JavaScript 脚本 


【示例 2】 如 果 在 script 元 素 中 删除 asyne 属性 ， 则 可 以 看 到 先 等 到 外 部 JavaScript 脚本 文件 加 载 
完毕 之 后 ， 才 执行 内 部 脚本 ， 效 果 如 图 2.21 所 示 。 


<script sre="test1js" onload="ok()"></script> 
<script> 

console.log(" 内 部 脚本 "); 

</script> 


站 localhostestzhtml x 


© [© locahos/test2ht 





图 2.21 同步 加 载 JavaScript 脚本 


2.5 HIMLS 新 的 全 局 属性 


HTML5 除了 支持 HTML4 原 有 的 全 局 属性 之 外 ， 还 添加 了 8 个 新 的 全 局 属性 。 所 谓 全 局 属性 是 


| 指 可 以 用 于 任何 HTML 元 素 的 属性 。 


2.5.1 contentEditable 一 一 可 编辑 内 容 


contentEditable 属性 的 主要 功能 是 允许 用 户 在 线 编辑 元 素 中 的 内 容 。contentEditable 是 一 个 布尔 值 
属性 ， 可 以 被 指定 为 rue 或 false。 

注意 ， 该 属性 还 有 个 隐藏 的 inherit (继承 ) 状态 ， 属 性 为 tue 时 ， 元 素 被 指定 为 允许 编辑 ， 属 性 
为 false 时 ， 元 素 被 指定 为 不 允许 编辑 ; 未 指定 true 或 false 时 ， 则 由 inherit 状态 来 决定 ， 如 果 元 素 的 





| 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 
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【示例 】 在 下 面 示例 中 为 正文 文本 包含 框 <div> 标 签 加 上 contentEditable 属性 后 ， 该 包含 框 包含 | 
的 文本 就 变 成 可 编辑 的 了 ， 浏 览 者 可 自行 在 浏览 器 中 修改 内 容 ， 执 行 结果 如 图 2.22 所 示 。 
<div contentEditable="true"> 
<p> 旧 有 全 局 属性 : id、class、style、title、accesskey、tabindex、lang、dir</p> 
<p> 新 增 全 局 属性 : contenteditable、contextmenu、data-*、draggable、dropzone、hidden、spellcheck、 





</div> 


口 localhosts080/mysite, x 卫生 [DD localhostis080/mysite” x \ 
CC | © localhost:808( te. : GC |© localhost8080/mysite/te... 人 女 | 让 ! 
旧 有 全 局 属性 : id、class、style、title、 新 增 全 局 属性 : contenteditable、 | 


accesskey、tabindex、lang、dir contextmenu、data-*、draggable、 1 
dropzone、 hidden、spellcheck、translate 


新 增 全 局 属性 : contenteditable、 
contextmenu、data-*、draggable、 和 日 有 全 局 属性 : id、class、style、title、 
dropzone、 hidden、spellcheck、translate accesskey、tabindex、lang、dii 





(a) 原始 列表 (b) 编辑 列表 项 项 目 
图 2.22 可 编辑 文本 
在 编辑 完 元 素 中 的 内 容 后 ， 如 果 想 要 保存 其 中 内 容 ， 只 能 使 用 JavaSeript 脚本 把 该 元 素 的 
innerHTML 发 送 到 服务 器 端 进行 保存 , 因为 改变 元 素 内 容 后 该 元 素 的 innerHTML 内 容 也 会 随 之 改变 ， 
目前 还 没有 特别 的 API 来 保存 编辑 后 元 素 中 的 内 容 。 
容 提示 : 在 JavaScript 脚本 中 ， 元 素 还 具有 一 个 isContentEditable 属性 ， 当 元 素 可 编辑 时 ， 该 属性 
值 为 tue; 当 元 素 不 可 编辑 时 ， 该 属性 值 为 false。 利 用 这 个 属性 ， 可 以 实现 对 编辑 数据 的 
后 期 操作 。 


2.5.2 contextmenu 一 一 快捷 菜单 


contextmenu 属性 用 于 定义 元 素 的 上 下 文 菜单 。 所 谓 上 下 文 菜单 ， 就 是 会 在 用 户 右 击 元 素 时 出 现 。 | 
【示例 】 下 面 示 例 使 用 contextmenu 属性 定义 <div> 元 素 的 上 下 文 菜单 , 其 中 contextmenu 属性 的 | 
| 

| 

| 








值 是 要 打开 的 <menu> 元 素 的 id 属性 值 。 
<div contextmenu="mymenu"> 上 下 文 菜单 
<menu type="context" id="mymenu"> 
<menuitem label=" 微 信 分 享 "></menuitem> 
<menuitem label=" 微 博 分 享 "></menuitem> 
</menu> 
</div> 
当 用 户 右 击 元 素 时 ， 会 弹出 一 个 上 下 文 菜单 ， 从 中 可 以 选择 指定 的 快捷 菜单 项 目 ， 如 图 2.23 | 
所 示 。 


癌 提示 : 目前 只 有 Firefox 支持 contextmenu 属性 。 
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图 2.23 打开 上 下 文 菜单 
| 2.5.3 data 一 一 自 定义 属性 


使 用 data-* 属 性 可 以 自 定义 用 户 数据 。 具 体 应 用 包括 : 
data-* 属 性 用 于 存储 页 面 或 元 素 的 私有 数据 。 
data-* 属 性 赋予 所 有 HTML 元 素 嵌 入 自 定义 属性 的 能 力 。 
| 存储 的 自 定义 数据 能 够 被 页 面 的 JavaScript 脚本 利用 ， 以 创建 更 好 的 用 户 体验 ， 方 便 Ajax 调用 
| 或 服务 器 端 数据 库 查询 。 
| data-* 属 性 包括 两 部 分 : 
属性 名 : 不 应 该 包含 任何 大 写字 母 ， 并 且 在 前 级 "data-" 之 后 必须 有 至 少 一 个 字符 。 
属性 值 ， 可 以 是 任意 字符 串 。 
当 浏 览 器 解析 时 ， 会 忽略 前 级 "data-"， 取 用 其 后 的 自 定义 属性 。 
| 【示例 1】 下 面 示例 使 用 data-* 属 性 为 每 个 列表 项 目 定义 一 个 自 定义 属性 type。 这 样 在 JavaScript 
| 脚本 中 可 以 判断 每 个 列表 项 目 包含 信 息 的 类 型 。 
<u> 

-<li data-animal-type="bird"> 猫 头 庆 </li> 

<li data-animal-type="fish'> 鲤 鱼 </li> 

<li data-animal-type="spider"> 映 蛛 </li> 
< 

【示例 2】 以 上 面 示例 为 基础 ， 下 面 示例 使 用 JavaScript 脚本 访问 每 个 列表 项 目的 type 属性 值 ， 
| 演示 效果 如 图 2.24 所 示 。 
Taz 
-<li data-animal-type="bird"> 猫 头 庆 </li> 

| <li data-animal-type="fish'"> 鲁 鱼 </li> 
| <li data-animal-type="spider"> 蜂 蛛 <Ji> 
| 





<script> 

var lis = document.getElementsByTagName("li"): 
| for(var i=0: i<lislength: i++){ 
| console.log(lis[i].dataset.animalType): 
| 国 
| </script> 
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图 2.24 访问 列表 项 目的 type 属性 值 


访问 元 素 的 自 定义 属性 ， 可 以 通过 元 素 的 dataset. 对 象 获取 ， 该 对 象 存 储 了 元 素 所 有 自 定义 属性 
的 值 。 访 问 规则 与 CSS 脚本 化 访问 相同 。 对 于 复合 属性 名 ， 通 过 驼峰 命名 法 访问 ， 如 animal-type， 
访问 时 使 用 animalType， 避 免 连 字符 在 脚本 中 引发 的 歧义 。 
< 负 注意 : 目前 伍 暂 不 支持 这 种 访问 方式 。 
2.5.4 draggable 一 一 可 拖 动 


draggable 属性 可 以 定义 元 素 是 否 可 以 被 拖 动 。 属 性 取 值 说 明 如 下 : 
true: 定义 元 素 可 拖 动 。 

false: 定义 元 素 不 可 拖 动 。 

auto: 定义 使 用 浏览 器 的 默认 行为 。 

draggable 属性 常用 在 拖 放 操作 中 ， 详 细 说 明 请 参考 第 15 章 拖 放 API。 


2.5.5 ”dropzone 一 一 拖 动 数据 


dropzone 属性 定义 在 元 素 上 拖 动 数据 时 ， 是 否 复制 、 移 动 或 链接 被 拖 动 数据 。 属 性 取 值 说 明 如 下 : 
copy: 拖 动 数据 会 产生 被 拖 动 数据 的 副本 。 

move: 拖 动 数据 会 导致 被 拖 动 数据 被 移动 到 新 位 置 。 

link: 拖 动 数据 会 产生 指向 原始 数据 的 链接 。 

例如 : 


<div dropzone="copy"></div> 





容 提示 :目前 所 有 主流 浏览 器 都 不 支持 dropzone 属性 。 
2.5.6 ” hidden 一 一 隐藏 





在 HIML5 中 ,所 有 元 素 都 包含 一 个 hidden 属性 。 该 属性 设置 元 素 的 可 见 状 态 ， 取 值 为 一 个 布尔 
值 ， 当 设 为 tue 时 ， 元 素 处 于 不 可 见 状 态 ， 当 设 为 false 时 ， 元 素 处 于 可 见 状态 。 | 
【示例 】 下 面 使 用 hidden 属性 定义 段落 文本 隐藏 显示 。 
<phidden><img src="images/1.jpg" width="200" /></p> | 
hidden 属性 可 用 于 防止 用 户 查 看 元 素 ， 直 到 匹配 某 些 条 件 ， 如 选择 了 某 个 复 选 框 。 然 后 ， 在 页 | 
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| 面 加 载 之 后 ， 可 以 使 用 JavaScript 脚本 删除 该 属性 ， 删 除 之 后 该 元 素 变 为 可 见 状态 ， 同 时 元 素 中 的 内 
| 容 也 即时 显示 出 来 。 
| 


痊 提示 : 除了 IE， 所 有 主流 浏览 器 都 支持 hidden 属性 。 
2.5.7 ”spellcheck 一 一 语法 检查 


spellcheck 属性 定义 是 否 对 元 素 进行 拼写 和 语法 检查 。 可 以 对 以 下 内 容 进行 拼写 检查 : 

input 元 素 中 的 文本 值 〈 非 密码 ) 。 

回 “<textarea> 元 素 中 的 文本 。 

| 回 “ 可 编辑 元 素 中 的 文本 。 

| spellcheck 属性 是 一 个 布尔 值 的 属性 ， 取 值 包括 tue 和 false， 为 true 时 表示 对 元 素 进行 拼写 和 语 
| 法 检查 ， 为 false 时 则 不 检查 元 素 。 用 法 如 下 所 示 : 

| <- 以 下 两 种 书写 方法 正确 -> 

| <textarea spellcheck="true" > 

| <input type=text spellcheck=false> 

| <!-- 以 下 书写 方法 为 错误 --> 

| <textarea spellcheck > 

| 

| 注意 ， 如 果 元 素 的 readOnly 属性 或 disabled 属性 设 为 tue， 则 不 执行 拼写 检查 。 

| 【示例 】 下 面 示例 设计 两 段 文 本 ， 第 一 段 文本 可 编辑 、 可 语法 检查 ; 第 二 段 文本 可 编辑 ， 但 不 允 
| 许 语 法 检查 。 当 编辑 文本 时 ， 第 一 段 文本 显示 检查 状态 ， 而 第 二 段 忽略 ， 如 图 2.25 所 示 。 

| 

| <p spellcheck="true"> 旧 有 全 局 属性 : id、class、style、title、accesskey、tabindex、lang、dir</p> 
| <p spellcheck="false"> 新 增 全 局 属性 : contenteditable、 contextmenu、 data-*、draggable、dropzone、 hidden、 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 





| spellcheck、translate</p> 
</div> 
ecahoutogamyahe x 
COieaostanan wm 让 | 3 


1 有 全 局 属 性 id、dass、style、title、accesskey、 
tabindex lang. dir 


新 增生 局 属性 - contenteditable、contextmenu、 


data-' draggable、dropzone, hidden, 
spellcheck. translate | 





2.25 ”段落 文本 检查 状态 比较 





可 翻译 


translate 属性 定义 是 否 应 该 翻译 元 素 内 容 。 取 值 说 明 如 下 : 
yes: 定义 应 该 翻译 元 素 内 容 。 
回 “no: 定义 不 应 翻译 元 素 内 容 。 
【示例 】 下 面 示例 演示 了 如 何 使 用 translate 属性 。 
<p translate="no"> 请 勿 翻译 本 段 。</p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 


2.5.8 translate 


痊 提示 : 目前 ， 所 有 主流 浏览 器 都 无 法 正确 地 支持 translate 属性 。 
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2.6 HTML5 文档 大 纲 


HTMLS 对 如 何 处 理 位 于 article、aside、nav 和 section 等 结构 元 素 中 的 hl 一 h6 有 一 套 算 法 。 该 算 | 
法 通常 称 为 HTMLS5 文档 大 纲 ， 文 档 大 岗 不 会 对 页 面 结构 造成 破坏 ， 也 不 会 影响 布局 。 不 过 ， 目 前 还 
没有 浏览 器 实现 这 套 算法 , 在 屏幕 阅读 器 中 只 有 JAWS (一 款 运行 于 Windows 下 的 屏幕 阅读 器 ) 支持 ，| 
而 它 的 实现 还 存在 问题 。 鉴 于 此 ，W3C 已 经 将 文档 大 纲 列 入 可 能 从 最 终 定稿 的 规范 中 移 除 的 特性 。 | 


2.6.1 定义 文档 节 段 


在 HTML5 文档 中 ， 节 段 是 一 个 很 重要 的 概念 ， 它 表示 一 个 语义 独立 的 
内 容 块 。 能 够 定义 节 段 的 元 素 包 括 : body、 section、 article、aside、 nav、header、 
footer。 

节 段 可 以 相互 嵌 套 ， 形 成 嵌 套 的 结构 层次 关系 。 每 个 节 段 都 必须 有 自己 
的 标题 ， 即 使 是 嵌 套 的 节 段 ， 也 必须 有 自己 的 标题 ， 标 题 可 以 使 用 hl 、h2、 
h3、h4、h5、h6 元 素 之 一 标识 。 

详细 示例 演示 说 明 ， 请 扫 码 学 习 。 

2.6.2 隐 式 分 节 
HTMLS5 分 节 元 素 不 会 强制 性 定义 大 岗 ， 为 了 与 HTML4 保持 兼容 ， 有 
-种 方式 来 定义 节 段 ， 而 不 需要 分 节 元 素 ， 这 种 方式 就 是 隐 式 分 节 。 

当 标 题 元 素 (h1 一 h6) 不 是 父 节 段 的 第 一 个 标题 时 ， 它 会 隐 式 定义 一 个 
新 的 节 段 。 这 种 隐 式 节 段 通过 在 父 节 点 中 与 之 前 标题 的 相对 级 别 来 确定 。 如 果 
比 之 前 的 标题 级 别 更 低 ， 那 么 就 会 定义 一 个 新 的 子 节 段 。 

详细 示例 演示 说 明 ， 请 扫 码 学 习 。 

2.6.3 ”特殊 分 节 


1. 分 节 根 


分 节 根 拥有 独立 的 大 纲 体系 ， 其 内 的 节 段 与 外 部 大 岗 没 有 联系 。 使 用 
blockquote、details、fieldset、figure、td 可 以 定义 分 节 根 元 素 。 


2. 主 纲 之 外 的 节 段 
下 面 4 个 元 素 用 来 定义 不 属于 文档 主要 大 纲 中 的 节 段 : aside、nav、header、footer。 
详细 示例 演示 说 明 ， 请 扫 码 学 习 。 

















27 案例 实战 





HTMLS 定义 了 一 组 新 的 结构 化 语义 标记 ， 使 用 它们 来 描述 网 页 内 容 ， 确 保 HTMLS 文档 结构 的 | 
简洁 、 友 好 。 虽 然 也 可 以 使 用 HTML4 的 div 和 span 进行 代 蔡 设计 ， 但 是 HIMLS 新 元 素 简化 了 页 面 
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| 设计 ， 明 确 的 语义 结构 更 适合 搜索 引擎 检索 和 抓 取 。 本 节 将 借助 HTMLS5 新 元 素 设计 一 个 博客 首页 。 
| 【操作 步骤 】 

| 第 1 步 ， 新 建 HTML5 文档 ， 保 存 为 testl html。 

贪 内 | 第 2 步 , 根据 上 面 各 节 介绍 的 知识 ， 开 始 构建 个 人 博客 首页 的 框架 结构 。 在 设计 结构 时 ， 最 大 限 
一 一】 度 地 选用 HTML5 新 结构 元 素 ， 所 设计 的 模板 页 面 基本 结构 如 下 所 示 。 


ge 
| 


| <h1>[ 网 页 标题 ]</h1> 
| <h2>[ 次 级 标题 ]</h2> 
| <h4>[ 标 题 提示 ]</h4> 
</header> 
<main> 
<nav> 
<h3>[ 导 航 栏 ]</h3> 
<a hre 仁 "#"> 链 接 1</a> <a hre 仁 "#"> 链 接 2</a> <a hre 仁 "#"> 链 接 3</a> 
</nav> 
<section> 
<h2>[ 文 章 块 ]</h2> 
<article> 
<header> 
<hl>[ 文 章 标题 ]<hl> 


| 

| 

| 

| 

| 

| 

| 

| 

| </header> 

| <p>[ 文 章 内 容 ]<p> 
| <footer> 

| <h2>[ 文 章 脚注 ]</h2> 
| </footer> 

| </article> 

| </section> 

| <aside> 

| <h3>[ 辅 助 信息 ]</h3> 
| </aside> 

| 

| 

| 

| 

| 


整个 页 面包 括 两 部 分 : 标题 部 分 和 主要 内 容 部 分 。 标 题 部 分 又 包括 : 网 站 标题 、 副 标题 和 提示 性 
| 标题 信息 ， 主 要 内 容 部 分 包括 : 导航 、 文 章 块 、 侧 边栏 、 脚 注 。 文 章 块 包括 3 部 分 : 标题 部 分 、 正 文 
| 部 分 和 脚注 部 分 。 

第 3 步 ， 使 用 HTML5 大 纲 工具 来 检查 模板 页 面 的 结构 设计 是 否 合理 。 访 问 http://gsnedders. 
html5.org/outliner/ 页 面 ， 在 该 页 面 提 交 本 地 的 模板 文档 testlLhtml， 则 可 以 看 到 如 图 2.26 所 示 的 大 纲 
信息 。 

检查 结果 说 明 本 示例 模板 页 面 设计 : 结构 合理 。 
| 第 4 步 ， 在 模板 页 面 基础 上 ， 开 始 细 化 本 示例 博客 首页 。 下 面 仅 给 出 本 例 首页 的 静态 页 面 结构 ， 
| 如 果 用 户 需要 后 台 动态 生成 内 容 ， 则 可 以 考虑 在 模板 结构 基础 上 另外 设计 。 把 testlhtml 另存 为 
| test2.html， 细 化 后 的 静态 首页 效果 如 图 2.27 所 示 。 
| 


， 凑 提示 : 限于 篇 幅 ， 本 节 没有 展示 完整 的 页 面 代 码 ,读者 可 以 通过 本 节 示例 源 代码 了 解 完整 的 页 面 
| 结构 。 
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HTML 5 Outliner 


Input HTML: 
选择 文件 test1.html 


Outine thisl 
URL: 


Outine thisl 


加 村 本人 民 问 他 HINLSE 人 么 让 S27 
HT 

抽样 人 了 让 汪 闪 力 ， 二 [ 抽 直 芝 二 的 各 ，，，《 生 思 科 计量 呈 这 了 放下 上， 和 来 天葬 光 95，，。 这 时 开 
mt) 


二 Ee9 和 真正 友基 的 人 怕人 和 ,全 又 好 者 少 避 什么 生肖 9 力 、 必 9 和 中， 项 员 折 和 ， 于 各 和 友 人 向 忆 吉 时 
Er 


图 2.27 细 化 后 的 首页 页 面 效 果 


第 5 步 ， 设 计 页 面 样式 部 分 代码 。 这 里 主要 使 用 了 CSS3 的 一 些 新 特性 ， 如 圆 角 (border-radius) 
和 旋转 变换 等 ， 通 过 CSS 设计 的 页 面 显示 效果 如 图 2.28 所 示 。 相 关 CSS3 技术 介绍 请 参阅 下 面 章节 
内 容 。 

考虑 到 本 章 重 点 学 习 HTML5 新 元 素 的 应 用 , 所 以 本 节 示例 不 再 深入 讲解 CSS 样式 代码 的 设计 过 
程 ， 感 兴趣 的 读者 可 以 参考 本 节 示 例 源 代 码 中 的 test3.html 文档 。 











图 2.28 博客 首页 的 页 面 完成 效果 
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| 第 6 步 ， 对 于 早期 版 本 浏览 器 ， 或 者 不 支持 HTMLS5 的 浏览 器 ， 需 要 添加 一 个 CSS 样式 ， 因 为 未 
| 知 元 素 默 认为 行内 显示 (display:inline), 对 于 HTMLS5 结构 元 素来 说 , 我 们 需要 让 它们 默认 为 块 状 显示 。 
| 


| article. section, nav. aside. main. header hgroup. footer { 
仿 F | display: block: 
A | } 
| 
第 7 步 ， 一 些 浏览 器 不 允许 样式 化 不 支持 的 元 素 。 这 种 情形 出 现在 IE8 及 以 前 的 浏览 器 中 ， 因 此 
| 还 需要 使 用 下 面 JavaScript 脚本 进行 兼容 。 
<I-[fltIE 9]> 
<script> 
document.createElement("article"): 
document.createElement("section"); 
document.createElement("nav"): 
document.createElement("aside"); 
document.createElement("main"):; 
document.createElement("header"): 
document.createElement("hgroup"); 
document.createElement("footer"): 
</script> 


<![endif]--> 
第 8 步 ， 如 果 浏 览 器 禁用 了 脚本 ， 则 不 会 显示 ， 可 能 会 出 问题 。 因 为 这 些 元 素 定义 整个 页 面 的 结 
构 。 为 了 预防 这 种 情况 ， 可 以 加 上 <noscrip 亿 标签 进行 提示 。 
<noscript> 
<h1> 警 告 </hl> 
<p> 因 为 你 的 浏览 器 不 支持 HTML5， 一 些 元 素 是 模拟 使 用 JavaScript。 不 幸 的 是 ， 您 的 浏览 器 已 禁用 肢 
本 。 请 启用 它 以 显示 此 页 。</p> 
</noscript> 


2.8 在 线 练 习 


使 用 HTML 结构 标签 设计 各 种 网 页 模块 。 
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HTML5 表单 


HTML5 Web Forms 2.0 对 HTML4 表单 的 功能 进行 侈 面 升级 ， 它 在 保持 了 简便 易 用 的 将 
性 的 同时 ， 增 加 了 许多 内 置 的 控件 或 者 控件 属性 来 满足 用 户 的 需求 ， 同 时 减少 了 开发 人 员 的 


编程 。 本 章 将 详细 介绍 HTML5 新 增 的 表单 类 型 和 属性 。 

权威 参考 : http://www.w3.org/Submission/web-forms2/ 

浏览 器 支持 : https://caniuse.com/、www.wufoo.com/html5。 前 者 上 的 信 
息 通 常 比 后 者 上 的 信息 更 新 一 些 ， 不 过 后 者 仍然 是 有 关 HTMLS 表单 信息 





的 一 个 重要 资源 。 


【 学 习 重 点 】 


Ld 


至 至 至 


使 用 不 同类 型 的 文本 框 。 

正确 设置 新 属性 。 

熟悉 表单 元 素 和 属性 。 

灵活 使 用 HTMLS 新 功能 设计 表单 页 面 。 


LA 


3.1 HTMLS 表单 特性 


HTMLS5 表单 新 增 了 很 多 功能 ， 我 们 将 在 本 章 各 节 中 详细 说 明 。 下 面 简单 列举 几 个 对 于 开发 者 来 
说 具有 重要 价值 的 特性 。 提示 : 浏览 器 对 最 后 3 个 特性 的 支持 不 是 很 好 , W3C 可 能 会 在 最 终 的 HTML5 
版 本 中 放弃 规范 。 

1. 新 的 控件 类 型 

HTMLS 新 增 一 系列 新 的 控件 , 这 些 表单 控件 具备 类 型 检查 的 功能 , 如 URL 输入 框 、 Email 输入 框 等 。 

<input type="u" 户 

<input type="email" /> 

2. 日 期 选择 器 和 颜色 选择 器 

在 HTML5 之 前 , 用 户 一 般 使 用 JavaScript 和 CSS 设计 日 期 选择 器 和 颜色 选择 器 , 这 样 费时 费力 ， 
且 使 用 不 是 很 友好 。 简 便 的 方法 就 是 借助 相关 框架 ， 如 Dojo、YUI 等 类 库 。 

<input type="date" /> 

<input type="color" /> 

3. 改进 文件 上 传 控件 

在 HIML5 中 , 文件 上 传 控 件 变 得 非常 强大 和 易 用 ， 用 户 可 以 使 用 一 个 控件 上 传 多 个 文件 ， 自 行 
规定 上 传 文件 的 类 型 (accept)， 甚 至 可 以 设 定 每 个 文件 最 大 的 大 小 (maxlength )。 

4. 内 建 表单 校 验 系 统 

HTML5 为 不 同类 型 的 输入 控件 各 自 提供 了 新 的 属性 ， 来 控制 这 些 控件 的 输入 行为 ， 如 必 填 项 
required 属性 ， 为 数字 类 型 控件 提供 的 max、min 等 。 在 提交 表单 时 ， 一 旦 校 验 错误 ， 浏 览 器 将 不 执 
行 提交 操作 ， 而 会 显示 相应 的 检验 错误 信息 。 

<input type="text" required /> 

<input type="number" min=10 max=100 /> 





5. XML Submission 
form 的 编码 格式 一 般 为 application/x-www-form-urlencoded。 这 种 格式 的 数据 传送 到 服务 器 端 ， 
可 以 方便 地 存 取 。HIML5 将 提供 一 种 新 的 数据 格式 一 一 XML Submission ， 即 
application/x-www-form+xml， 这 样 服务 器 端 将 直接 接收 到 XML 形式 的 表单 数据 。 
i 
<field name="name" index="0">Peter</field> 
<field name="password" index="0">password</field> 
</submission> 
6. 外 联 数据 源 
在 HIML5 之 前 , 为 select 下 拉 列 表 动 态 添加 很 多 选项 , 非常 烦琐 ,而 这 些 选项 多 来 自 于 数据 库 ， 
如 分 类 列表 、 商 品 列表 等 。HTML5 支持 data 属性 ， 为 select 控件 提供 外 联 数据 源 。 
‘<select data="http://domain/options"></select> 
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7. 重复 (repeat) 的 模型 

HTMLS5 提供 一 套 重复 机 制 来 帮助 用 户 构 建 一 些 重复 输入 列表 ， 如 add、remove、move-up、 
move-down 的 按钮 类 型 ， 通 过 这 一 套 重复 的 机 制 ， 开 发 人 员 可 以 非常 方便 地 实现 经 常用 到 编辑 列表 ， | 
这 是 一 个 很 常规 的 模式 ， 我 们 可 以 增加 一 个 条 目 、 删 除 某 个 条 目 、 移 动 某 个 条 目 等 。 | 








3.2 新 的 Input 类 型 


HTMLS5 新 增 了 多 个 输入 型 表单 控件 ， 通 过 使 用 这 些 新 增 的 表单 输入 类 型 ， 可 以 实现 更 好 的 输入 
控制 和 验证 。 目 前 ，Opera 浏览 器 支持 最 好 ， 但 在 所 有 主流 浏览 器 中 都 可 以 使 用 ， 即 使 不 被 支持 ， 仍 
然 可 以 显示 为 普通 的 文本 框 。 


3.2.1 email 一 一 Email 地 址 框 


回 

email 类 型 的 input 元 素 是 一 种 专门 用 于 输入 Email 地 址 的 文本 框 ， 在 提交 表单 的 时 候 ， 会 自动 验 | 

证 Email 输入 框 的 值 。 如 果 不 是 一 个 有 效 的 电子 邮件 地 址 ， 则 该 输入 框 不 允许 提交 该 表单 。 
【示例 】 下 面 是 email 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 您 的 Email 地 址 : <input type="email" name="user_email" /><br /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.1 所 示 。 如 果 输 入 了 错误 的 Email 地 址 格式 ， 单 
击 “ 提 交 ” 按 钮 时 会 出 现 如 图 3.2 所 示 的 提示 。 





[DD localhost/index1.html = x We. [DD localhost/index1.html = x 到 


CG | © localhost/index1.html 女 | : GC | © localhost/index1.html 女 | : 


请 输入 他 的 Bail 地 址 ， 请 给 和 你 的 Pit 此 


| 提交 | 
在 电子 邮件 地 址 中 包 
括 '@"。“3" 中 缺少 @ 








图 3.1 email 类 型 的 input 元 素 示例 图 3.2 ”检测 到 不 是 有 效 的 Email 地 址 


其 中 demo_form.php 表示 提交 给 服务 器 端的 处 理 文件 。 对 于 不 支持 type="email" 的 浏览 器 来 说 ， | 
将 会 以 type="text" 来 处 理 ， 所 以 并 不 妨碍 旧版 浏览 器 浏览 采用 HTMLS5 中 type="email" 输 入 框 的 网 页 。 | 

如 果 将 email 类 型 的 input 元 素 用 在 手机 浏览 器 中 , 则 会 更 加 凸显 其 优势 。 例如, 如 果 使 用 iPhone | 
或 iPod 中 的 Safari 浏览 器 浏览 包含 Email 输入 框 的 网 页 ，Safari 浏览 器 会 通过 改变 触摸 屏 键 盘 来 配合 | 
该 输入 框 ， 在 触摸 屏 键盘 中 添加 “@” 和 “.” 键 以 方便 用 户 输入 ， 如 图 3.3 所 示 ， 而 当 浏 览 普通 内 容 | 
时 则 不 会 出 现 这 两 个 键 。email 类 型 的 input 元 素 这 一 新 增 功能 虽然 用 户 不 易 察觉 , 但 屏幕 键盘 的 变化 | 
无 疑 会 带 来 很 好 的 用 户 体验 。 
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完成 
qiweirtiyuiiop 
asdfghjkl 
较 zxcvbnm 问 
国 加 … 。 -EE 
3.3 iPhone 中 的 Safari 浏览 器 触摸 屏 键盘 随 输入 域 改变 而 改变 


3.2.2 ur 一 一 URL 地 址 框 


Wrl 类 型 的 input 元 素 提供 用 于 输入 url 地 址 的 文本 框 。 当 提交 表单 时 , 如 果 所 输入 的 是 url 地 址 格 
式 的 字符 串 ， 则 会 提交 服务 器 ， 如 果 不 是 ， 则 不 允许 提交 。 
【示例 】 下 面 是 url 类 型 的 一 个 应 用 示例 。 
<form action="demo _form.php" method="get"> 
请 输入 网 址 ，<input type="url" name="user_url" /><br/> 
<input type="submit" /> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.4 所 示 。 如 果 输 入 了 错误 的 url 地 址 格式 , 单 击 “ 提 
交 ” 按 钮 时 会 出 现 如 图 3.5 所 示 的 “请 输入 网 址 ”提示 。 


< 佣 注意 :www.baidu.com 并 不 是 有 效 的 URL， 因 为 URL 必须 以 http:// 或 https:// 开 头 。 这 里 最 好 使 
用 占 位 符 提示 访问 者 。 另外， 还 可 以 在 该 字段 下 面 的 解释 文本 中 指出 合法 的 格式 。 


加 x 2 





DD localhost/test1.html 。 xx 最 时 DD localhost/testihtml x WW 
© | © localhost/test1.html : C | © localhost/test1.html 


请 给 和 网 直 全 了] 请 输入 网 址 ， 
提交 | | 提交 | 


N 回 请 输入 网 址 . 


3.4 udl 类 型 的 input 元 素 示例 3.5 检测 到 不 是 有 效 的 ul 地 址 


与 前 面 介绍 的 email 类 型 输入 框 相同 , 对 于 不 支持 type="url" 的 浏览 器 , 将 会 以 type="text" 来 处 理 ， 
所 以 并 不 妨碍 旧版 浏览 器 正常 采用 type="url" 输 入 框 中 的 URL 信息 。 

如 果 使 用 iPhone 或 Pad 中 的 Safari 浏览 器 浏览 包含 url 输入 域 的 网 页 ，Safari 浏览 器 会 通过 改变 
触摸 屏 键盘 来 配合 该 输入 框 ， 在 触摸 屏 键盘 中 添加 “.”“/”“.com” 键 以 方便 用 户 输入 ， 如 图 3.6 所 
示 ， 而 当 浏 览 普通 内 容 时 则 不 会 出 现 这 3 个 键 。 
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青 输 和 网址: 
Ss) 





完成 


qiwe ritiyiuliiolp 


图 :xc vbnn 回 
回回 /~ 区 到 


图 3.6 iphone 中 的 Safari 浏览 器 触摸 屏 键盘 随和 输入 域 改 变 而 改变 
3.2.3 number 一 一 数字 框 


number 类 型 的 input 元 素 提 供用 于 输入 数值 的 文本 框 。 用 户 还 可 以 设 定 对 所 接受 的 数字 的 限制 ， 
包括 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 
会 提示 错误 信息 。 

【示例 】 下 面 是 aumber 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 数值 ，<input type="number" name="numberl" min="l" max="20" step="4"> 

<input type="submit" /> 

</form> 





以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.7 所 示 。 如 果 输 入 了 不 在 限定 范围 之 内 的 数字 ， 
单 击 “ 提 交 ” 按 钮 时 会 出 现 如 图 3.8 所 示 的 提示 。 





[DN localhost/test1.html x NW [Dlocalhost/test1.html 。 x \— 放 


CC | © localhost/test1.html : CG | © localhost/testl.html 


请 输入 数值 : $] [ 夫 交 | 请 输入 数值 : [34 此] 








回 值 必须 小 于 或 等 于 20。 








3.7 number 类 型 的 input 元 素 示例 3.8 检测 到 输入 了 不 在 限定 范围 之 内 的 数字 


图 3.8 所 示 为 输入 了 大 于 规定 的 最 大 值 时 所 出 现 的 提示 。 同 样 的 ， 如 果 违 反 了 其 他 限定 ， 也 会 出 | 
现 相关 提示 。 例 如 ， 如 果 输 入 数值 15， 则 单 击 “ 提 交 ” 按 钮 时 会 出 现 如 图 3.9 所 示 的 提示 。 这 是 因为 | 
限定 了 合法 的 数字 间隔 为 4， 在 输入 时 只 能 输入 4 的 倍数 ， 如 4、8、16 等 。 又 如 ， 如 果 输 入 数值 -12， 
则 会 提示 “ 值 必须 大 于 或 等 于 1”， 如 图 3.10 所 示 。 
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gm RS 


D locahostpestihtnl xx 恒 D ecahonmect hn x 
2 © | © locahost/iestl.htm 文 | : 3 CG [© pocahostyiestihtml 


请 输入 数值 , [ 何 _ 引 [ 吉 | 请 输入 数值 ; [1 “| [所 交 | 


回 请 往 入 有 效 值 ， 两 个 最 综 近 的 有 效 回 十 必须 大 于 或 等 于 1。 
值 分 别 为 13 和 17, 





| 图 3.9 出 现 “ 值 无 效 ” 的 提示 图 3.10 提示 “ 值 必须 大 于 或 等 于 1” 
| number 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 3.1 所 示 。 

| 

表 3.1 number 类 型 的 属性 

规定 允许 的 最 大 值 


| i 规定 允许 的 最 小 值 
| 规定 合法 的 数字 间隔 〈 如 果 step="4"， 则 合法 的 数 是 -4、0、4、8 等 ) 





对 于 不 同 的 浏览 器 ，number 类 型 的 输入 框 的 外 观 也 可 能 会 有 所 不 同 。 而 如 果 使 用 iPhone 或 iPod 
| 中 的 Safari 浏览 器 浏览 包含 number 输入 框 的 网 页 ， 则 Safari 浏览 器 同样 会 通过 改变 触摸 屏 键 盘 来 配 


| 合 该 输入 框 ， 触 摸 屏 键盘 会 优化 显示 数字 以 方便 用 户 输入 ， 如 图 3.11 所 示 。 





oe BE 0 Ts 


1921681102 © 


请 输入 数值 : (站 GE) 


守成 


11234567890 


-1/ :0 see” 
国 一 


图 3.11 iphone 中 的 Safari 浏览 器 触摸 屏 键 盘 显示 出 数字 与 符号 
| 3.2.4 range 一 一 范围 框 


range 类 型 的 input 元 素 提供 用 于 输入 包含 一 定 范围 内 数字 值 的 文本 框 ， 在 网 页 中 显示 为 滑动 条 。 
用 户 可 以 设 定 对 所 接受 的 数字 的 限制 , 包括 规定 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 
如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 会 出 现 错误 提示 。 

【示例 】 下 面 是 range 类 型 的 一 个 应 用 示例 。 

| <fom action="demo fom php" method="get"> 
| 请 输入 数值 : <input type="range" name="rangel" min="1" max="30" /> 
| 
| 





<input type="submit" /> 
</form> 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.12 所 示 。 range 类 型 的 input 元 素 在 不 同 浏览 器 中 | 
的 外 观 也 不 同 ， 例 如 在 Opera 浏览 器 中 的 外 观 如 图 3.13 所 示 ， 会 在 滑 块 下 方 显示 出 额外 的 数字 间隔 | 
短线 。 | 


| 
Sa] 3 | 
D hot Ne OECD Ws 


了 © |©® localhost/test] himl 





请 输入 猴 导 ; 





图 3.12 range 类 型 的 input 元 素 示例 3.13 ”range 类 型 的 input 元素 在 Opera 浏览 器 中 的 外 观 
range 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 3.2 所 示 。 
表 3.2 range 类 型 的 属性 


规定 允许 的 最 大 值 


规定 允许 的 最 小 值 


规定 合法 的 数字 间隔 (如果 step="4"， 则 合法 的 数 是 -4、0、4、8 等 ) | 





从 表 3.2 中 可 以 看 出 ，range 类 型 的 属性 与 number 类 型 的 属性 相同 ， 这 两 种 类 型 的 不 同 在 于 外 观 
表现 上 ， 支 持 range 类 型 的 浏览 器 都 会 将 其 显示 为 滑 块 的 形式 ， 而 不 支持 range 类 型 的 浏览 器 则 会 将 
其 显示 为 普通 的 文本 框 ， 即 以 type="text" 来 处 理 。 


3.2.5 ”date pickers 一 一 日 期 选择 器 


日 期 选择 器 (Date Pickers) 是 网 页 中 经 常 要 用 到 的 一 种 控件 ， 在 HTMLS5 之 前 的 版 本 中 ， 并 没有 
提供 任何 形式 的 日 期 选择 器 控件 , 多 采用 一 些 JavaScript 框架 来 实现 日 期 选择 器 控件 的 功能 ,如 jQuery 
UI、YUI 等 ， 在 具体 使 用 时 会 比较 麻烦 。 

HTML5 提供 了 多 个 可 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 即 6 种 日 期 选择 器 控件 ， 分 别 用 于 选择 | 
以 下 日 期 格式 : 日 期 、 月 、 星 期、 时 间 、 日 期 + 时 间 、 日 期 + 时 间 + 时 区 ， 如 表 3.3 所 示 。 








表 3.3 日 期 选择 器 类 型 





HTML 代码 功能 与 说 明 





























datetime-local <input type="datetime-local"> 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 








date | <input type="date"> 选取 日 、 月 、 年 | 
month | <input type="month"> 选取 月 、 年 | 
week | <input type="week"> 选取 周 和 年 | 
time | <input type="time"> 选取 时 间 (小 时 和 分 钟 ) | 
datetime | <input type="datetime"> 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) | 


容 提示 : UTC 时 间 就 是 0 时 区 的 时 间 ， 而 本 地 时 间 就 是 本 地 时 区 的 时 间 。 例如， 如果 北 京 时 间 为 | 
早上 8 点 ， 则 UTC 时 间 为 0 点 ， 也 就 是 说 ，UTC 时 间 比 北京 时 间 晚 8 小 时 。 
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1. date 类 型 

date 类 型 的 日 期 选择 器 用 于 选取 日 、 月 、 年 ， 即 选择 一 个 具体 的 日 期 ， 例 如 2018 年 8 月 8 日 ， 
选择 后 会 以 2018-08-08 的 形式 显示 。 

【示例 1】 下 面 是 date 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 日 期 <input type="date" name=" datel" /> 

<input type="submit" /> 

</fonrm> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.14 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 3.15 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 可 见 该 浏览 器 并 不 支持 日 期 选择 器 
控件 。 而 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 日 期 。 











em vv oq 
a 2017 年 2 有 > 
[localhost/testihtml = x We ®© 


| 让 下 下田 古 局 A 
字 CGOIocalhosUresn hunl | 导 - 避 - 司 = 网 四 有 村 局 


请 入 入 日 期 ，[ 针 Va/6B ”<:v|[ 妈 


图 3.14 在 Chrome 浏览 器 中 的 运行 结果 图 3.15 在 Opera 浏览 器 中 的 运行 结果 


2. month 类 型 

month 类 型 的 日 期 选择 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 ， 例 如 2018 年 8 月 ， 选 择 后 
会 以 2018-08 的 形式 显示 。 

【示例 2】 下 面 是 month 类 型 的 一 个 应 用 示例 。 

<form action="demo_form.php" method="get"> 

请 输入 月 份 : <input type="month" name=" monthl" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.16 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 3.17 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 只 显示 到 月 份 ， 而 
不 会 显示 日 期 。Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 
月 份 ， 但 不 能 选择 具体 日 期 。 可 以 看 到 ， 整 个 月 份 中 的 日 期 都 会 以 深 灰 色 显示 ， 单 击 该 区 域 可 以 选择 
整个 月 份 。 


DD ecalhosyaessahtml 。 





3.16 在 Chrome 浏览 器 中 的 运行 结果 
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3.17 在 Opera 浏览 器 中 的 运行 结果 
3. week 类 型 


week 类 型 的 日 期 选择 器 用 于 选取 周 和 年 , 即 选择 一 个 具体 的 哪 一 周 , 例如 2017 年 10 月 第 42 周 ， 

选择 后 会 以 “2017 年 第 42 周 ”的 形式 显示 。 
【示例 3】 下 面 是 week 类 型 的 一 个 应 用 示例 。 

<form action="demo _form.php" method="get"> 

请 选择 年 份 和 周 数 : <input type="week" name="weekl" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.18 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 3.19 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 显示 年 份 和 周 数 ， 
而 不 会 显示 日 期 。Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具 
体 的 年 份 和 周 数 ， 但 不 能 选择 具体 日 期 。 可 以 看 到 ， 整 个 月 份 中 的 日 期 都 会 以 深 灰 色 按 周 数 显 示 ， 单 
击 该 区 域 可 以 选择 某 一 周 。 


办 localhosta000/myste/t X 本 
< C BB © localhost 


| 污 迁 至 年 份 和 周 政 ;|W 和 各 屿 月 x$v || 活 突 
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3.18 在 Chrome 浏览 器 中 的 运行 结果 3.19 在 Opera 浏览 器 中 的 运行 结果 


4. time 类 型 


time 类 型 的 日 期 选择 器 用 于 选取 时 间 , 具体 到 小 时 和 分 钟 , 例如 , 选择 后 会 以 22:59 的 形式 显示 。 | 
【示例 4】 下 面 是 time 类 型 的 一 个 应 用 示例 。 

<form action="demo _form.php" method="get"> 

请 选择 或 输入 时 间 :。 <input type="time" name="timel" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.20 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 3.21 
所 示 。 
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localhost 
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| 

| 3.20 在 Chrome 浏览 器 中 的 运行 结果 图 3.21 在 Opera 浏览 器 中 的 运行 结果 

| 除了 可 以 使 用 微调 按钮 之 外 ， 还 可 以 直接 输入 时 间 值 。 如 果 输 入 了 错误 的 时 间 格 式 并 单 击 了 “ 提 
交 ” 按 钮 ， 则 在 Chrome 浏览 器 中 会 自动 更 正 为 最 接近 的 合法 值 ， 而 在 正 10 浏览 器 中 则 以 普通 的 文 
本 框 显 示 ， 如 图 3.22 所 示 。 

| time 类 型 支持 使 用 一 些 属性 来 限定 时 间 的 大 小 范围 或 合法 的 时 间 间 隔 ， 如 表 3.4 所 示 。 


表 3.4 time 类 型 的 属性 





属 性 描 述 
max 规定 允许 的 最 大 值 
min 规定 允许 的 最 小 值 
step 规定 合法 的 时 间 间 隔 
value 规定 默认 值 





<form action="demo form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="time" name="timel" step="5" value="09:00"> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.23 所 示 , 可 以 看 到 , 在 输入 框 中 出 现 设置 的 默认 
| 值 “09:00”， 并 且 当 单 击 微调 按钮 时 ， 会 以 5 秒 钟 为 单位 递增 或 递减 。 当 然 ， 用户 还 可 以 使 用 min 和 
max 属性 指定 时 间 的 范围 。 


| 
| 
| 【示例 5】 可 以 使 用 下 列 代码 来 限定 时 间 。 
| 
| 
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图 3.22 IE10 不 支持 该 类 型 输入 框 图 3.23 使 用 属性 值 限定 时 间 类 型 
在 date 类 型 、month 类 型 、week 类 型 中 也 支持 使 用 上 述 属 性 值 。 
5. datetime 类 型 





| datetime 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 UTC 时 间 。 
| 【示例 6】 下 面 是 datetime 类 型 的 一 个 应 用 示例 。 
| <form action="demo form php" method="get"> 
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| 

请 选择 或 输入 时 间 : <input type="datetime" name="datetimel" /> | 
<input type—"submit" /> | 
</form> | 
| 

| 


以 上 代码 在 Safari 浏览 器 中 的 运行 结果 如 图 3.24 所 示 ， 在 也 hone 中 的 运行 结果 如 图 3.25 所 示 。 
192.168.1.102 [2 





er es 








消除 完成 
[ls +I@ roveoo ¢ |[Q- oo0ge | 2015 年 1 月 30 日 
请 潜 择 或 输入 时 间 ，|2017-07-01703;037 到 [要 过 2016 年 12 月 “31B | 
2017 年 1 月 但 | 
2018 年 2 月 2 日 ! 
2019 年 3 月 。 3 旧 | 
图 3.24 在 Safari 浏览 器 中 的 运行 结果 图 3.25 在 iPhone 中 的 运行 结果 


< 人 注意 : IE、Firefox 和 Chrome 不 再 支持 <input type="datetime"> 元 素 ，Chrome 和 Safari 部 分 版 本 
支持 。Opera 12 以 及 更 早 的 版 本 完全 支持 。 


6. datetime-local 类 型 
datetime-local 类 型 的 日 期 选择 器 用 于 选取 时 间 、 上 日、 月、 年 ， 其 中 时 间 为 本 地 时 间 。 
【示例 7】 下 面 是 datetime-local 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="datetime-local" name="datetime-locall" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.26 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 3.27 
所 示 。 





[localhosta0e0/mysite «NS localhostaoa0/mysite x 十 


< C 中 | 到 locahost 


请 选择 或 移入 时 间 : |20lT/l0/20 22: 大 xx 总 所 








3.26 在 Chrome 浏览 器 中 的 运行 结果 3.27 在 Opera 浏览 器 中 的 运行 结果 


。61 。 


gm 2 


| 3.2.6 ”search 一 一 搜索 框 


| search 类 型 的 input 元 素 提供 用 于 输入 搜索 关键 词 的 文本 框 .在 外 观 上 看 起 来 , search 类 型 的 input 
元 素 与 普通 的 text 类 型 的 区 别 : 当 输入 内 容 时 ， 右 侧 会 出 现 一 个 “XxX ”图 标 ， 单 击 即 可 清除 搜索 框 。 
【示例 】 下 面 是 search 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 搜索 关键 词 : <input type="search" name="search1" /> 

<input type="submit" value="Go"/> 

</form> 





以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.28 所 示 。 如 果 在 搜索 框 中 输入 要 搜索 的 关键 词 ， 
在 搜索 框 右 侧 就 会 出 现 一 个 “X ”按钮 。 单 击 该 按钮 可 以 清除 已 经 输入 的 内 容 。 在 Windows 系统 中 ， 
新 版 的 正 、Chrome、Opera 浏览 器 支持 “X ”按钮 这 一 功能 ，Firefox 浏览 器 则 不 支持 ， 如 图 3.29 
所 示 。 
口 ecalhosrestlhtm| x Ne = localhost8080/mysite/te= X 


© © localhost/testl.himl 廊 | : € © localhost8080/my 惠 跟 c | > 


请 输入 搜索 关键 词 ，html x| [6] 请 输入 搜索 关键 词 : hm 上 Go 








图 3.28 search 类 型 的 应 用 图 3.29 Firefox 没有 “X ”按钮 
| 在 Mac OS 义 或 iOS 系统 中 ,Safari 浏览 器 会 将 搜索 框 泻 染 成 圆 角 ,如 图 3.30 所 示 , 而 不 是 Windows 
系统 中 用 户 常见 到 的 方 角 。 
| rr 
| :CO @ 
qwertyuilop 


aisidfigh jkl 
园 : xc< vbnn 网 
四 图  E3 

图 3.30 iOS 系统 中 的 圆 角 搜索 框 


内 提示 在 默认 情况 下 ， 为 Chrome、Safari 和 Mobile Safari 等 浏览 器 中 的 搜索 框 设置 样式 是 受到 
限制 的 。 如 果 要 消除 这 一 约束 ， 重 新 获得 CSS 的 控制 权 ， 可 以 使 用 专 有 的 
“-webkit-appearance: none; ”声明 ， 例 如 : 
inputftype="search"] { 
-webkit-appearance: none: 
E 
”A 的 注意 ，appearance 属性 并 不 是 官方 的 CSS， 因 此 不 同 浏览 器 的 行为 有 可 能 不 一 样 。 
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3.2.7 tel 一 一 电话 号 码 框 


tel 类 型 的 input 元 素 提供 专门 用 于 输入 电话 号 码 的 文本 框 。 它 并 不 限定 只 输入 数字 ， 因 为 很 多 的 | 
电话 号 码 还 包括 其 他 字符 ， 如 “+”“-”“(”“)” 等 ， 例 如 86-0536-8888888。 | 
【示例 】 下 面 是 tel 类 型 的 一 个 应 用 示例 。 
<form action="demo form.php" method="get"> 
请 输入 电话 号 码 : <input type="tel" name="tell" /> | 
<input type="submit" value=" 提 交 "/> | 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.31 所 示 。 从 某 种 程度 上 来 说 ,所 有 的 浏览 器 都 支 | 
持 tel 类 型 的 input 元 素 ， 因 为 它们 都 会 将 其 作为 一 个 普通 的 文本 框 来 显示 。HTMLS5 规则 并 不 需要 浏 
览 器 执行 任何 特定 的 电话 号 码 语法 或 以 任何 特别 的 方式 来 显示 电话 号 码 。 
iPhone 或 iPad 中 的 浏览 器 遇 到 tel 类 型 的 input 元 素 时 ， 会 自动 变换 触摸 屏幕 键盘 以 方便 用 户 输 
入 ， 如 图 3.32 所 示 。 








ee Ed 
1921681102 © 


电话 号 码 : [| 








完成 
1 2 3 
localhosttesti henl 心 上 
© [© oanowvtestnm E 4 5 6 
请 输入 电话 号 码 ，[ 染 8 9 
十 闪失 0 四 
图 3.31 tel 类 型 的 应 用 3.32 iPhone 中 的 屏幕 键盘 变化 


3.2.8 color 一 一 拾 色 器 


color 类 型 的 input 元 素 提 供 专 门 用 于 选择 颜色 的 文本 框 。 当 color 类 型 文本 框 获取 焦点 后 ， 会 自 
动 调用 系统 的 颜色 窗口 ， 包 括 苹果 系统 也 能 弹出 相应 的 系统 色 盘 。 
【示例 】 下 面 是 color 类 型 的 一 个 应 用 示例 。 
<form action="demo form.php" method="get"> 
请 选择 一 种 颜色 : <input type="color" name="colorl" /> 





<input type="submit" value=" 提 交 "/> 

</form> 

以 上 代码 在 Opera 浏览 器 中 的 运行 结果 如 图 3.33 所 示 ， 单 击 颜色 文本 框 ， 会 打开 Windows 系统 | 
的 “颜色 ”对 话 框 ， 如 图 3.34 所 示 ， 选 择 一 种 颜色 之 后 ， 单 击 “ 确 定 ” 按 钮 返回 网 页 ， 这 时 可 以 看 | 
到 颜色 文本 框 显示 对 应 颜色 效果 ， 如 图 3.35 所 示 。 


这 提示 : 下 和 Safari 浏览 器 暂 不 支持 ，Mac OS 和 iOS 系统 也 不 支持 
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图 3.33 color 类 型 的 应 用 图 3.34 Windows 系统 中 的 “颜色 ”对 话 框 

















图 3.35 设置 颜色 后 效果 


3.3 新 的 input 属性 


HTMLS5 为 input 元 素 新 增 了 多 个 属性 ， 用 于 限制 输入 行为 或 格式 。 
3.3.1 autocomplete 一 一 自动 完成 


autocomplete 属性 可 以 帮助 用 户 在 输入 框 中 实现 自动 完成 输入 。 取 值 包括 on 和 o 企 , 用 法 如 下 所 示 。 
<input type="email" name="email" autocomplete="off' /> 
兰 提示 : autocomplete 属性 适用 input 类 型 包括 : text、search、url、telephone、email、password、 
datepickers、range 和 color。 
autocomplete 属性 也 适用 于 form 元 素 ， 默 认 状 态 下 表单 的 autocomplete 属性 处 于 打开 状态 ， 其 包 
含 的 输入 域 会 自动 继承 autocomplete 状态 ， 也 可 以 为 某 个 输入 域 单独 设置 autocomplete 状态 。 
< 儿 注意 : 在 茶 些 浏览 器 中 需要 先 启用 浏览 器 本 身 的 自动 完成 功能 , 才能 使 autocomplete 属性 起 作用 。 


【 示例】 设置 autocomplete 为 on 时 ， 可 以 使 用 HIMLS 新 增 的 datalist 元 素 和 list 属性 提供 一 个 
数据 列表 供用 户 进行 选择 。 下 面 示 例 演示 如 何 应 用 autocomplete 属性 、datalist 元 素 和 list 属性 实现 自 
动 完 成 。 

<h2> 输 入 你 最 喜欢 的 城市 名 称 </h2> 
<form autocompelete="on"> 
<input type="text" id="city" list="cityList"> 
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<datalist id="cityList" style="display:none:"> | 
<option value="BeiJing">BeiJing</option> 
<option value="QingDao">QingDao</option> 
<option value="QingZhou">QingZhou</option> 
<option value="QingHai">QingHai</option> 

</datalist> 

</form> 


在 浏览 器 中 预览 ， 当 用 户 将 焦点 定位 到 文本 框 中 时 ， 会 自动 出 现 一 个 城市 列表 供用 户 选择 ， 如 | 
| 
| 





图 3.36 所 示 。 而 当 用 户 单 击 页 面 的 其 他 位 置 时 ， 这 个 列表 就 会 消失 。 

当 用 户 输入 时 ， 该 列表 会 随 用 户 的 输入 自动 更 新 ， 例 如 ， 当 输入 字母 q 时 ， 会 自动 更 新 列表 ， | 
只 列 出 以 q 开头 的 城市 名 称 ， 如 图 3.37 所 示 。 随 着 用 户 不 断 地 输入 新 的 字母 ， 下 面 的 列表 还 会 随 之 | 
变化 。 
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图 3.36 自动 完成 数据 列表 图 3.37 数据 列表 随 用 户 输入 而 更 新 


容 提示 : 多 数 浏览 器 都 带 有 辅助 用 户 完成 输入 的 自动 完成 功能 ， 只 要 开启 了 该 功能 ， 浏 览 器 会 自动 
记录 用 户 所 输入 的 信息 ， 当 再 次 输入 相同 的 内 容 时 ,浏览 器 就 会 自动 完成 内 容 的 输入 ,从 
安全 性 和 隐私 的 角度 考虑 ,这 个 功能 存在 较 大 的 隐患 ， 如 果 不 希 望 浏览 器 自动 记录 这 些 信 
息 ， 则 可 以 为 form 或 form 中 的 input 元 素 设置 autocomplete 属性 ， 关 闭 该 功能 。 


3.3.2 autofocus 一 一 自动 获取 焦点 


autofocus 属性 可 以 实现 在 页 面 加 载 时 ， 让 表单 控件 自动 获得 焦点 。 用 法 如 下 所 示 。 
<input type="text" name="fhame" autofocus="autofocus" /> 
autocomplete 属性 适用 所 有 <input> 标 签 的 类 型 ， 如 文本 框 、 复 选 框 、 单 选 按钮 、 普 通 按钮 等 。 
< 注意 : 在 同一 页 面 中 只 能 指定 一 个 autofocus 对 象 ， 当 页 面 中 的 表单 控件 比较 多 时 ， 建 议 为 最 需 
要 聚焦 的 那个 控件 设置 autofocus 属性 值 ， 如 页 面 中 搜索 文本 框 ， 或 者 许可 协议 的 “同意 ” | 
按钮 等 。 
【示例 1】 下 面 示例 演示 如 何 应 用 autofocus 属性 。 


<form> 


<p> 请 仔细 阅读 许可 协议 :</p> 








<label for="textareal"></label> 

<textarea name="textareal" id="textareal" cols="45" rows="5"> 许 可 协议 具体 内 容 .…..</textarea> 
<p> 
ES 
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re Se 


<input type="submit" value=" 同 意 " autofocus> 





<input type="submit" value=" 拒 绝 "> 
<p> 
</form> 
全 ~ 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.38 所 示 。 页 面 载 入 后 ,“ 同 意 ” 按 钮 自动 获得 焦 
Note | 点 ， 因 为 通常 希望 用 户 直接 单 击 该 按钮 。 如 果 将 “拒绝 ”按钮 的 autofocus 属性 值 设 置 为 on， 则 页 面 


载 入 后 焦点 就 会 在 “拒绝 ”按钮 上 ， 如 图 3.39 所 示 ， 但 从 页 面 功用 的 角度 来 说 这 样 并 不 合适 。 


人 eeahewhentthtml Dlocalhostnestheml x 


© | ® localhos/tesrl nml : © [© locahosViest him 


| 请 仔细 网 读 许 可 协议 请 体 纪 阅读 许可 协议 ， 
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图 3.38 “同意 ”按钮 自动 获得 焦点 图 3.39 “拒绝 ”按钮 自动 获得 焦点 
【示例 2】 如 果 浏 览 器 不 支持 autofocus 属性 ， 可 以 使 用 JavaScript 实现 相同 的 功能 。 在 下 面 脚本 








<script> 

if (!("autofocus" in document.createElement("input"))) { 
document.getElementById("ok").focusO: 

} 

</script> 


3.3.3 ”form 一 一 归属 表单 


form 属性 可 以 设置 表单 控件 归属 的 表单 。 适 用 于 所 有 <input> 标 签 的 类 型 。 


岩 提示 :; 在 HTML4 中 ， 用 户 必须 把 相关 的 控件 放 在 表单 内 部 ， 即 <form> 和 </form> 之 间 。 在 提交 
表单 时 ， 在 <form> 和 </form> 之 外 的 控件 将 被 忽略 。 


【示例 】form 属性 必须 引用 所 属 表单 的 id， 如 果 一 个 form 属性 要 引用 两 个 或 两 个 以 上 的 表单 ， 
| 则 需要 使 用 空格 将 表单 的 id 值 分 隔 开 。 下 面 是 一 个 form 属性 应 用 。 

| <form action="" method="get" id="form1"> 

| 请 输入 姓名 : <input type="text" name="namel" autofocus/> 

| <input type="submit” value=" 提 交 "/> 

| </form> 

| 请 输入 住址 ，<input type="text" name="addressl" form="form1" /> 

| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.40 所 示 。 如 果 填 写 姓名 和 住址 并 单 击 “ 提 交 ” 按 
| 钮 ， 则 namel 和 addressl 分 别 会 被 赋值 为 所 填写 的 值 。 例 如 ， 如 果 在 姓名 处 填写 “zhangsan”， 住 址 
| 处 填写 “北京 "， 则 单 击 “ 提 交 ” 按 钮 后 ， 服 务 器 端 会 接收 到 “namel=zhangsan” 和 “address1= 北 京 ”。 
| 用户 也 可 以 在 提交 后 观察 浏览 器 的 地 址 栏 ， 可 以 看 到 有 “name1=zhangsan&address1= 北 京 ” 字 样 ， 如 


| 和 
| 图 3.41 所 示 。 
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© [OOETRIEETESETE | : 


请 给 和 姓名 : [| 
请 输入 住址 : 









3.40 ”form 属性 的 应 用 


3.3.4 ”表单 重 写 


HTMLS 新 增 5 个 表单 重 写 属性 ， 用 于 重 写 <form> 标 签 属性 设置 ， 简 单 说 明 如 下 : 
formaction: 重 写 <form> 标 签 的 action 属性 。 

formenctype: 重 写 <form> 标 签 的 enctype 属性 。 

formmethod: 重 写 <form> 标 签 的 method 属性 。 

formnovalidate: 重 写 <form> 标 签 的 novalidate 属性 。 

formtarget: 重 写 <form> 标 签 的 target 属性 。 


< 所 注意 : 表单 重 写 属性 仅 适用 于 submit 和 image 类 型 的 input 元 素 . 


3.41 地 址 中 要 提交 的 数据 


回回 回回 加 


【示例 】 下 面 示例 设计 通过 formaction 属性 ， 实 现 将 表单 提交 到 不 同 的 服务 器 页 面 。 
<form action="1.asp" id="testform"> 
请 输入 电子 邮件 地 址 :<input type="email" name="userid" /><br /> 
<input type="submit" value=" 提 交 到 页 面 1" formaction="1.asp" /> 
<input type="submit" value=" 提 交 到 页 面 2" formaction="2.asp" /> 
<input type="submit" value=" 提 交 到 页 面 3" formaction="3.asp" /> 
</form> 


3.3.5 ”height 和 width 一 一 高 和 宽 


height 和 width 属性 仅 用 于 设置 <input type="image"> 标 签 的 图 像 高 度 和 宽度 。 
【示例 】 下 面 示例 演示 了 height 与 width 属性 的 应 用 。 

<form action="testform.asp" method="get"> 

请 输入 用 户 名 : <input type="text" name="user_name" /><br /> 

<input type="image" src="images/submit.png" width="72" height="26" /> 

</form> 








源 图 像 的 大 小 为 288X104 像素 ， 使 用 以 上 代码 将 其 大 小 限制 为 72X26 像素 ， 在 Chrome 浏览 器 
中 的 运行 结果 如 图 3.42 所 示 。 





图 3.42 form 属性 的 应 用 
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3.3.6 list 一 一 列表 选项 


list 属 性 用 于 设置 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 .该 属性 适用 于 以 下 类 型 的 <input> 
| 标签 : text、search、url、telephone、email、date pickers、number、range 和 color。 
演示 示例 可 参考 3.4.1 节 datalist 元 素 介绍 。 


< 人 注意 : 目前 最 新 的 主流 浏览 器 都 已 支持 list 属性 ， 不 过 呈现 形式 咯 有 不 同 。 


3.3.7 min、max 和 step 一 一 最 小 值 、 最 大 值 和 步 长 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 mput 输入 类 型 设置 限 值 ， 适 用 于 date pickers、 
number 和 range 类 型 的 <input> 标 签 。 具 体 说 明 如 下 : 
min 属性 : 设置 输入 框 所 允许 的 最 小 值 。 
max 属性 :设置 输入 框 所 允许 的 最 大 值 。 
step 属性 : 为 输入 框 设 置 合 法 的 数字 间隔 ( 步 长 》。 例 如 ，step="4"， 则 合法 值 包括 -4、0、 
4 等 。 
【示例 】 下 面 示 例 设计 一 个 数字 输入 框 ， 并 规定 该 输入 框 接受 介 于 0 到 12 的 值 ， 且 数字 间隔 
为 4。 
<form action="testform.asp" method="get"> 
请 输入 数值 : <input type="number" name="numberl" min="0" max="12" step="4" /> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 Chrome 浏览 器 中 运行 ， 如 果 单 击 数 字 输 入 框 右 侧 的 微调 按钮 ， 则 可 以 看 到 数字 以 4 为 步 进 
值 递增 ， 如 图 3.43 所 示 ; 如 果 输 入 不 合法 的 数值 ， 如 5， 单 击 “ 提 交 ” 按 钮 时 会 显示 错误 提示 ， 如 
图 3.44 所 示 。 





D cnocnernhm x Co 


© [© ocahowtesl html 


Ylocolhost/testl ht x N= 
© [Olocahosviestintm 广 | ; 请 蛤 入 霓 信 下 3] [到 | 


请 洽 和 数值 ，[ 本 “各 [县志 回音 蝗 入 有 效 值 。 两 个 是 持 近 的 有 效 
全 分 引 为 4f08. 





图 3.43 list 属性 应 用 图 3.44 显示 错误 提示 


3.3.8 multiple 一 一 多 选 


multiple 属性 可 以 设置 输入 域 一 次 选择 多 个 值 。 适 用 于 email 和 file 类 型 的 <input> 标 签 。 
【示例 】 下 面 在 页 面 中 插入 一 个 文件 域 ， 使 用 multiple 属性 允许 用 户 一 次 提交 多 个 文件 。 
<form action="testform.asp" method="get"> 
请 选择 要 上 传 的 多 个 文件 : <input type="file" name="img" multiple /> 
<input type="submit" value=" 提 交 " /> 
</form> 
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在 Chrome 浏览 器 中 的 运行 结果 如 图 3.45 所 示 。 如 果 单 击 “ 选 择 文件 ”按钮 ， 则 会 允许 在 打开 的 | 
对 话 框 中 选择 多 个 文件 。 选 择 文件 并 单 击 “ 打 开 ” 按 钮 后 会 关闭 对 话 框 ， 同 时 在 页 面 中 会 显示 选中 文 | 


件 的 个 数 ， 如 图 3.46 所 示 。 





请 选择 要 上 导 的 克 个 文件 ; = 请 计 择 要 上传 的 多 个 文件 ， 
久 讶 + 个 文件 


过 择 立 诈 | 未 造 拓 攻 何 安 件 E33 EE 








图 3.45 mnultiple 属性 的 应 用 图 3.46 显示 被 选中 文件 的 个 数 
3.3.9 ”pattern 一 一 匹配 模式 让 
回 5 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern )。 模 式 就 是 JavaScript 正则 表达 式 ， 通 过 自 定 | 视频 讲解 


| 
义 的 正则 表达 式 匹配 用 户 输入 的 内 容 ， 以 便 进 行 验证 。 该 属性 适用 于 text、search、url、telephone、 | 
email 和 password 类 型 的 <input> 标 签 。 | 


容 提示 : 读者 可 以 在 http:/html5pattern.com 上 面 找 到 一 些 常 用 的 正则 表达 式 ， 并 将 它们 复制 、 粘 贴 
到 自己 的 pattern 属性 中 进行 应 用 。 


【示例 】 下 面 示例 使 用 pattern 属性 设置 文本 框 必须 输入 6 位 数 的 邮政 编码 。 
<form action= "testform.asp" method="get"> 
请 输入 邮政 编码 : <input type="text" name="zip_code" pattem="[0-9]{6}" 
tile=" 请 输入 6 位 数 的 邮政 编码 " /> 
<input type="submit" value=" 提 交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 3.47 所 示 。 如 果 输 入 的 数字 不 是 6 位 ， 则 会 出 现 错误 提示 ， 
如 图 3.48 所 示 。 如 果 输 入 的 并 非 规定 的 数字 ， 而 是 字母 ， 也 会 出 现 这 样 的 错误 提示 ， 因 为 
pattern="[0-9]{6}" 中 规定 了 必须 输入 0 一 9 这 样 的 阿拉 伯 数 字 ， 并 且 必 须 为 6 位 数 。 


D eahoxhexlm x Oe DD lecalhoztexlheml x 
GC © localhosytestihiml 


请 洽 入 邮政 所 码 : [了 
EE 





© | © localhosUtesiihrr 
请 入 氢 政 编码 ;T1111 


回 再 与 所 商 打 的 性 式 保持 一 到 
入 oaeeog 扩 吉 








3.47 pattem 属性 的 应 用 图 3.48 ”出 现 错误 提示 
3.3.10 ”placeholder 一 一 替换 文本 


placeholder 属性 用 于 为 input 类 型 的 输入 框 提供 一 种 文本 提示 ， 这 些 提 示 可 以 描述 输入 框 期 待 用 
户 输 入 的 内 容 , 在 输入 框 为 空 时 显示 , 而 当 输 入 框 获取 焦点 时 自动 消失 。placeholder 属性 适用 于 text、 
search、url、telephone、email 和 password 类 型 的 <input> 标 签 。 





| 
| 
| 
Kk 
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【示例 】 下 面 是 placeholder 属性 的 一 个 应 用 示例 。 请 注意 比较 本 例 与 上 例 提 示 方 法 的 不 同 。 
<form action="/testform.asp" method- "get > 
请 输入 邮政 编码 : 
<input type="text" name="zip code" pattern="[0-9]{6}" 
placeholder=" 请 输入 6 位 数 的 邮政 编码 " > 


<input type="submit' value=" 提 交 " /> 
te 上 本 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.49 所 示 。 当 输入 框 获得 焦点 并 输入 字符 时 ， 提 示 
| 文字 消失 ， 如 图 3.50 所 示 。 
| 





DD localhost/test1.htr x 最 了 
GC | © localhost/test1l.html 食 


请 输入 邮政 编码 : [和 
| 提交 | 


D localhost/test1.htr x WW 


CC | © localhost/test1.html 女 


请 输入 邮政 编码 : 
提交 





图 3.49 placeholder 属性 的 应 用 3.50 ”提示 消失 


3.3.11 _ required 一 一 必 填 


required 属性 用 于 定义 输入 框 填写 的 内 容 不 能 为 空 ， 否 则 不 允许 提交 表单 。 该 属性 适用 于 text、 
search、 url、 telephone、 email、 password、date pickers、number、checkbox、radio 和 file 类 型 的 <input> 
标签 。 
【示例 】 下 面 示例 使 用 required 属性 规定 文本 框 必须 输入 内 容 。 
<form action= "testform.asp" method="get"> 
请 输入 姓名 : <input type="text" name="usr_name" required="required" /> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 Chrome 浏览 器 中 的 运行 结果 如 图 3.51 所 示 。 当 输入 框 内 容 为 空 并 单 击 “ 提 交 ” 按 钮 时 ,会 出 
| 现 “ 请 填写 此 字段 ”的 提示 ， 只 有 输入 内 容 之 后 才 人 允许 提交 表单 。 
| 
| D localhost/test1.htr x 


CG | © Ilocalhosttestlhtml 安 | : 


请 输 和 姓名:[ | 
[经] 


回 请 填写 此 字段 








3.51 提示 “请 填写 此 字段 ” 
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3.4 新 的 表单 元 素 


HTMLS 新 增 3 个 表单 元 素 : datalist、keygen 和 output， 下 面 分 别 进 行 说 明 。 
3.4.1 datalist 一 一 数据 列表 


datalist 元 素 用 于 为 输入 框 提供 一 个 可 选 的 列表 , 供用 户 输入 匹配 或 直接 选择 。 如 果 不 想 从 列表 中 
选择 ， 也 可 以 自行 输入 内 容 。 
datalist 元 素 需要 与 option 元 素 配合 使 用 ， 每 一 个 option 选项 都 必须 设置 value 属性 值 。 其 中 
<datalist> 标 签 用 于 定义 列表 框 ， <option> 标 签 用 于 定义 列表 项 。 如 果 要 把 datalist 提供 的 列表 绑 定 到 某 
输入 框 上 ， 还 需要 使 用 输入 框 的 list 属性 来 引用 datalist 元 素 的 id。 
【 示例】 下面 示例 演示 了 datalist 元 素 和 list 属性 的 配合 使 用 。 
<form action="testform.asp" method="get"> 
请 输入 网 址 ，<input type="url" list="url_list" name="weblink" /> 
<datalist id="url list"> 
<option label=" 新 浪 " value="http://www.sina.com.cn" /> 
<option label=" 搜 狐 " value="http://www.sohu.com" /> 
<option label=" 网 易 " value="http://www.163.com" /> 
</datalist> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 Chrome 浏览 器 中 运行 ， 当 用 户 单 击 输入 框 之 后 ， 就 会 弹出 一 个 下 拉 网 址 列表 ， 供 用 户 选择 ， 
效果 如 图 3.52 所 示 。 








D localhost/estihtml = x We 
© © localhost/testl.html 


请 输入 网 址 ，| | 


http//wwweina.com.cn $a 


httpV/wwwsehfyom 
http//www1s3.com RS 








图 3.52 datalist 元 素 和 list 属性 应 用 | 
3.4.2” ”keygen 一 一 密 钥 对 生成 器 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方 法 。 
作为 密 钥 对 生成 器 , 当 提 交 表 单 时 ,keygen 元 素 会 生成 两 个 键 : 私 钥 和 公 钥 。 私 钥 存储 于 客户 端 | 
公 钥 被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 
目前 ， 浏 览 器 对 该 元 素 的 支持 不 是 很 理想 。 
【示例 】 下 面 是 keygen 属性 的 一 个 应 用 示例 。 
<form action="/testform.asp" method="get"> 
请 输入 用 户 名 : <input type="text" name="usr_ name" /><br> 
请 选择 加 密 强度 : <keygen name="security" /><br> 
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<input type="submit" value=" 提 交 " /> 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.53 所 示 。 在 “请 选择 加 密 强 度 ” 右 侧 的 keygen 
仿 7 | 元 素 中 可 以 选择 一 种 密 钥 强 度 ， 有 2048( 高 强度 ) 和 1024 (中 等 强度 ) 两 种 ， 在 Firefox 浏览 器 也 提 
一 供 两 种 选项 ， 如 图 3.54 所 示 。 
I 


C [© locahosytestiniml 六 | 3 
请 连 入 用 户 名 : 





erm 
| 1024( ] 





图 3.53 ”Chrome 浏览 器 提供 的 密 钥 等 级 图 3.54 Firefox 浏览 器 提供 的 密 钥 等 级 


3.4.3 output 一 一 输出 结果 
output 元 素 用 于 在 浏览 器 中 显示 计算 结果 或 脚本 输出 ， 其 语法 如 下 。 





<output name="">Text</output> 

【示例 】 下 面 是 output 元 素 的 一 个 应 用 示例 。 该 示例 计算 用 户 输入 的 两 个 数字 的 乘积 。 
<script type="text/javascript"> 

function multiO{ 


a=parseInt(prompt(" 请 输入 第 1 个 数字 。".0)); 
| b=parseInt(prompt(" 请 输入 第 2 个 数字 。".0)); 
| document.forms["form"]["result"].value=a*b; 
} 
</script> 
<body onload="multi0"> 
<form action="testform.asp" method="get" name="form"> 
两 数 的 乘积 为 : <output name="result"></output> 
</form> 
</body> 


| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 3.55 和 图 3.56 所 示 。 当 页 面 载 入 时 ， 会 首先 提示 
| “请 输入 第 1 个 数字 ”， 输 入 并 单 击 “ 确 定 ” 按 钮 后 再 根据 提示 输入 第 2 个 数字 。 再 次 单 击 “ 确 定 ” 
| 按钮 后 ， 显 示 计算 结果 ， 如 图 3.57 所 示 。 
| 




















四 -二 5 四 -二 二 
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本 SS1 人 3， B21 
| 男 要 
| ra ns 
| 
| 了 | 
| 区 时 | 吧 - 居 
| 
| 图 3.55 ”提示 输入 第 1 个 数字 图 3.56 提示 输入 第 2 个 数字 
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D localhost/test1.html x We 


GC | © localhost/test1l.html 


两 数 的 乘积 为 : 1836 





图 3.57 显示 计算 结果 
3.5 新 的 form 属性 | 


HTML5 为 form 元 素 新 增 了 两 个 属性 : autocomplete 和 novalidate， 下 面 分 别 进行 说 明 。 
3.5.1 autocomplete 一 一 自动 完成 


autocomplete 属性 用 于 规定 form 中 所 有 元 素 都 拥有 自动 完成 功能 。 该 属性 在 介绍 input 属性 时 已 | 
经 介绍 过 ， 用 法 与 之 相同 。 

但 是 当 autocomplete 属性 用 于 整个 form 时 ， 所 有 从 属于 该 form 的 控件 都 具备 自动 完成 功能 。 如 
果 要 关闭 部 分 控件 的 自动 完成 功能 ， 则 需要 单独 设置 autocomplete="off'， 有 具体 示例 可 参考 3.3.1 节 
autocomplete 属性 的 介绍 。 


3.5.2 ”novalidate 一 一 禁止 验证 


novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 适 用 于 <form> 标 签 ， 以 及 text、 
search、url、telephone、email 、password、date pickers、range 和 color 类 型 的 <inpuf> 标 签 。 
【示例 1】 下 面 示例 使 用 novalidate 属性 取消 了 整个 表单 的 验证 。 
<form action="testform.asp" method="get" novalidate> 
请 输入 电子 邮件 地 址 : <input type="email" name="user_email" /> 
<input type="submit" value=" 提 交 " /> | 
</form> 
【补充 】 | 
HTML5 为 form、input、select 和 textarea 元 素 定 义 了 一 个 checkValidity0 方 法 。 调 用 该 方法 ， 可 | 
以 显 式 地 对 表单 内 所 有 元 素 内 容 或 单个 元 素 内 容 进行 有 效 性 验证 。checkValidity0 方 法 将 返回 布尔 值 ，| 
【示例 2】 下 面 示例 使 用 checkValidity0 方 法 ， 主 动 验证 用 户 输入 的 Email 地 址 是 否 有 效 。 


<script> 
function checkO{ 
Var email = document.getElementById("email"): 
if(email.value—""){ 
alert(" 请 输入 Email 地 址 "); 
Teturn false: 











3 
else 这 !emailcheckValidityO){ 
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| alert(" 请 输入 正确 的 Email 地 址 小 
| Tetum false: 
| 


} 
| else 
仿 F | alert(" 您 输入 的 Email 地 址 有 效 "): 
A | } 
| 
</script> 
<form id=testform onsubmit="return check():" novalidate> 
| <label for=email>Email</label> 
| <input name=email id=email type=email /><br/> 
<input type=submit> 
</form> 


| 写 提示 : 在 HIML5 中 ,form 和 input 元素 都 有 一 个 validity 属性 ， 该 属性 返回 一 个 ValidityState 对 
| 象 。 该 对 象 具有 很 多 属性 ， 其 中 最 简单 、 最 重要 的 属性 为 valid 属性 ， 它 表示 表单 内 所 有 
元 素 内 容 是 否 有 效 或 单个 input 元 素 内 容 是 否 有 效 . 


3.6 案例 实战 


下 面 通过 两 个 案例 练习 HTMLS5 表单 在 页 面 中 的 应 用 。 
| 3.6.1 设计 HTML5 注册 表单 


本 节 示例 将 利用 HTML5 新 的 表单 功能 , 设计 一 个 简单 的 用 户 注册 的 界面 , 注册 项 目 包括 用 户 名 、 
| 密码 、 出 生日 期 、 国 籍 、 保 密 问题 等 内 容 。 本 例 在 Opera 浏览 器 中 的 运行 效果 如 图 3.58 所 示 。 


Om iocalhosteog0myste/ Xx + 


C 8 加 localhost 


用 户 注册 
ID (请 使 用 Email 注册 ) | 


室 码 





出 生日 期 






































交 过 的 各 你 [= 到 除 | 
提交 信息 

| + 

| 线 上 阅读 图 3.58 设计 HIMLS 注册 表单 

| 具体 代码 解析 请 扫 码 学 习 。 
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3.6.2 设计 HTML5 验证 表单 
本 节 示 例 将 利用 HIMLS 表单 内 建 校 验 机 制 ， 设 计 一 个 表单 验证 页 面 ， 效 果 如 图 3.59 所 示 。 

















i 
| 
© | 
o | 
9 | 
| 
| 
身份 证 号 | 
| 
| 
年 -月 | 
EP PFE 上 | 
图 3.59 设计 HTML5 验证 表单 相沿 站 


具体 操作 步骤 请 扫 码 学 习 。 


3.7 在 线 练 习 


1. 练习 表单 结构 设计 和 基本 行为 的 控制 。 
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HTMLS5 绘图 和 动画 


HTML5 新 增 <canvas> 标 签 ， 并 提供 了 一 套 Canvas API， 多 许 用 户 通 过 使 用 JavaScript 
脚本 在 <canvas> 标 签 标 识 的 画布 上 绘制 图 形 、 创 建 动画 ,甚至 可 以 进行 实时 视频 处 理 或 演 染 。 
本 章 将 重点 介绍 Canvas API 的 基本 用 法 ， 帮 助 用 户 在 网 页 中 绘制 漂亮 的 图 形 ， 创 造 丰 富 多 
彩 、 赏 心 悦 目 的 Web 动画 。 


【 学 习 重 点 】 

WI 使 用 canvas 元 素 。 

绘制 图 形 。 

设置 图 形 样式 。 

灵活 使 用 Canvas API 设计 网 页 动画 。 


至 至 至 
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4.1 使 用 canvas 


在 HTML5 文档 中 ， 使 用 <canvas> 标 签 可 以 在 网 页 中 创建 一 块 画布 ， 用 法 如 下 所 示 : 

<canvas id="myCanvas" width="200" height="100"></canvas> | 

该 标签 包含 三 个 属性 : | 

id: 用 来 标识 画布 ， 以 方便 JavaScript 脚本 对 其 引用 。 

width: 设置 canvas 的 宽度 。 

height， 设 置 canvas 的 高 度 。 

在 默认 情况 下 ，canvas 创建 的 画布 大 小 为 宽 300 像素 、 高 150 像素 ， 可 以 使 用 width 和 height 属 | 
性 自 定义 其 宽度 和 高 度 。 

注意 ， 与 <img> 不 同 ，<canvas> 需 要 结束 标签 </canvas>。 如 果 结 束 标签 不 存在 ， 则 文档 的 其 余部 | 
分 会 被 认为 是 蔡 代 内 容 ， 将 不 会 显示 出 来 。 

【示例 1】 可 以 使 用 CSS 控制 canvas 的 外 观 。 例 如 ， 在 下 面 示 例 中 使 用 style 属性 为 canvas 元 素 
添加 一 个 实心 的 边框 ， 在 浏览 器 中 的 预览 效果 如 图 4.1 所 示 。 

<canvas id="myCanvas" style="border:1px solid:” width="200" height="100"></canvas> 

使 用 JavaScript 可 以 在 canvas 画布 内 绘画 ， 或 设计 动画 。 具 体 步 又 如 下 : 

【操作 步 又】 

第 1 步 ， 在 HTML5 页 面 中 添加 <canvas> 标 签 ， 设 置 canvas 的 id 属性 值 以 便 JavaScript 调用 。 

<canvas id="myCanvas" width="200" height="100"></canvas> 

第 2 步 ， 在 JavaScript 脚本 中 使 用 document.getElementById0 方 法 ， 根 据 canvas 元 素 的 id 获取 对 
canvas 的 引用 。 

Var c=document.getElementById("myCanvas"): 

第 3 步 ， 通 过 canvas 元 素 的 getContext0 方 法 获取 画布 上 下 文 (context)， 创 建 context 对 象 ， 以 | 
获取 允许 进行 绘制 的 2D 环境 。 

Var context=c.getContext("2d"): 

getContext("2d") 方 法 返回 一 个 画布 泻 染 上 下 文 对 象 ， 使 用 该 对 象 可 以 在 canvas 元 素 中 绘制 图 形 ， 
参数 “2d” 表 示 二 维 绘图 。 

第 4 步 ， 使 用 JavaScript 进行 绘制 。 例 如 ， 使 用 以 下 代码 可 以 绘制 一 个 位 于 画布 中 央 的 矩形 。 

context.fillStyle="#FFOOFF"; 

context.fillRect(50.25.100.50): 

这 两 行 代码 中 , filStyle 属性 定义 将 要 绘制 的 矩形 的 填充 颜色 为 粉红 色 , fillRect0 方 法 指定 了 要 绘 | 
制 的 矩形 的 位 置 和 尺寸 。 图 形 的 位 置 由 前 面 的 canvas 坐标 值 决 定 ， 尺 寸 由 后 面 的 宽度 和 高 度 值 决 定 。 | 
在 本 例 中 ， 坐 标 值 为 《50,25)， 尺 寸 为 宽 100 像素 、 高 50 像素 ， 根 据 这 些 数值 ， 粉 红色 矩形 将 出 现 | 
在 画面 的 中 央 。 

【示例 2】 下 面 给 出 完整 的 示例 代码 。 
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<canvas id="myCanvas" style="border: 1px solid:" width="200" height="100"></canvas> 
<script> 


天 7 | context fillStyle="#FFOOFF": 
~ | context.fillRect(50,25.100.,50): 


te 国定 
| 以 上 代码 在 浏览 器 中 的 预览 效果 如 图 4.2 所 示 。 在 画布 周围 加 了 边框 是 为 了 更 能 清楚 地 看 到 中 间 
| 拢 形 位 于 画布 的 什么 位 置 。 


Bal ©- Seen- - a0| 











图 4.1 为 canvas 元 素 添加 实心 边框 图 4.2 使 用 canvas 绘制 图 形 


fillRect(50,25,100,50) 方 法 用 来 绘制 矩形 图 形 , 它 的 前 两 个 参数 用 于 指定 绘制 图 形 的 x 轴 和 y 轴 坐 
| 标 ， 后 面 两 个 参数 设置 绘制 矩形 的 宽度 和 高 度 。 

| 在 canvas 中 ， 坐 标 原点 〈0,0) 位 于 canvas 画布 的 左上 角 ，x 轴 水 平 向 右 延伸 ，y 轴 垂 直 向 下 延 
| 伸 ， 所 有 元 素 的 位 置 都 相对 于 原点 进行 定位 ， 如 图 4.3 所 示 。 


坐标 原点 〈0.0) 匠 绘制 图 形 的 坐标 起 点 〈50.25) 


和 一 一 
yY 轴 垂直 向 下 延伸 | | 
x 轴 水 平 向 右 延伸 


4.3 canvas 默认 坐标 点 


目前 ，IE 9+、Firefox、Opera、Chrome 和 Safari 版 本 浏览 器 均 支 持 canvas 元 素 及 其 属性 和 方法 。 

老 版 本 浏览 器 可 能 不 支持 canvas 元 素 ， 因 此 在 特定 用 户 群 中 ， 需 要 为 这 些 浏 览 器 提供 蔡 代 内 容 。 
只 需要 在 <canvas> 标 签 内 嵌入 蔡 代 内 容 ， 不 支持 canvas 的 浏览 器 会 忽略 canvas 元 素 ， 而 显示 替代 内 
容 ; 支持 canvas 的 浏览 器 则 会 正常 泻 染 canvas， 而 忽略 蔡 代 内 容 。 例 如 : 

<canvas id="stockGraph" width="150" height="150"> 当 前 浏览 器 暂 不 支持 canvas </canvas> 

<canvas id="clock" width="150" height="150"> 

<img src="images/clock.png" width="150" height="150" alt=""/> 
</canvas> 












< 负 注意 : canvas 元 素 可 以 实现 绘图 功能 , 也 可 以 设计 动画 演示 , 但 是 如 果 HTML 页 面 中 有 上 比 canvas 
| 元 素 更 合适 的 元 素 存在 , 则 建议 不 要 使 用 canvas 元 素 。 例 如 , 用 canvas 元 素来 泻 染 HTML 
| 页 面 的 标题 样式 标签 便 不 太 合适 。 
| 
| 
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42 绘制 图 形 


本 节 将 介绍 一 些 基本 图 形 的 绘制 ， 包 括 矩 形 、 直 线 、 圆 形 、 曲 线 等 形状 或 路 径 。 
4.2.1 和 矩形 


canvas 仅 支 持 一 种 原生 的 图 形 绘制 : 矩形 。 绘 制 其 他 图 形 都 至 少 需要 生成 一 条 路 径 。 不 过 ， 拥 有 
众多 路 径 生 成 的 方法 ， 绘 制 复杂 图 形 也 很 轻松 。 

canvas 提供 了 三 种 方法 绘制 矩形 : 

flIRect(x, y, width, height): 绘制 一 个 填充 的 和 矩形。 | 
strokeRect(x, y, width, heighb: 绘制 一 个 矩形 的 边框 。 | 
clearRect(x, y, width, height): 清除 指定 矩形 区 域 ， 让 清除 部 分 完全 透明 。 | 
参数 说 明 如 下 : | 
x: 矩形 左上 角 的 x 坐标 。 | 
y: 矩形 左上 角 的 y 坐标 。 | 
width: 矩形 的 宽度 ， 以 像素 为 单位 。 

height: 算 形 的 高 度 ， 以 像素 为 单位 。 

【示例 】 下 面 示例 分 别 使 用 上 述 3 种 方法 绘制 了 3 个 嵌 套 的 矩形 ， 预 览 效果 如 图 4.4 所 示 。 
<canvas id="canvas" width="300" height="200" style="border:solid 1px #999:"></canvas> 
<script> 





Var canvas = document.getElementById('canvas'); 
if (canvas.getContext) { 
Var ctx = canvas.getContext(2d'): 
ctx.fillRect(25,25.100,100): 
ctx.clearRect(45.45.60.60): 
ctx.SstrokeRect(S0.50.50.50): 


</script> 








图 4.4 绘制 矩形 


在 上 面 代 码 中 ，filIRect0 方 法 绘制 了 一 个 边 长 为 100px 的 黑色 正方 形 。clearRect0 方 法 从 正方 形 
的 中 心 开始 擦 除了 一 个 60px X 60px 的 正方 形 ， 接 着 strokeRect0 在 清除 区 域内 生成 一 个 50px X 50px 
的 正方 形 边框 。 
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| 座 提示 : 不 同 于 路 径 函 数 ， 以 上 3 个 函数 绘制 之 后 ， 会 马上 显现 在 canvas 上 ， 即 时 生效 。 
| 
| 4.2.2 ”路径 


图 形 的 基本 元 素 是 路 径 。 路 径 是 通过 不 同 颜色 和 宽度 的 线段 或 曲线 相连 形成 的 不 同形 状 的 点 的 集 
合 。 一 个 路 径 ， 甚 至 一 个 子路 径 ， 都 是 闭合 的 。 使 用 路 径 绘制 图 形 的 步骤 如 下 : 

第 1 步 ， 创 建 路 径 起 始点 。 

第 2 步 ， 使 用 画图 命令 绘制 路 径 。 

第 3 步 ， 把 路 径 封 闭 。 

第 4 步 ， 生 成 路 径 之 后 ， 可 以 通过 描 边 或 填充 路 径 区 域 来 泻 染 图 形 。 

说 明 如 下 : 


加 回回 网 


beginPathO: 开始 路 径 。 新 建 一 条 路 径 , 生成 之 后 ， 图 形 绘制 命令 被 指向 到 路 径 上 生成 路 径 。 
closePathO0: 闭合 路 径 。 闭 合 路 径 之 后 图 形 绘制 命令 又 重新 指向 到 上 下 文中 。 

stroke0: 描 边 路 径 。 通 过 线条 来 绘制 图 形 轮廓 。 

fil0: 填充 路 径 。 通 过 填充 路 径 的 内 容 区 域 生成 实心 的 图 形 。 


这 提示 : 生成 路 径 的 第 一 步 是 调用 beginPath() 方 法 。 每 次 调用 这 个 方法 之 后 ,表示 开始 重新 绘制 新 


的 图 形 。 闭 合 路 径 closePath0 不 是 必需 的 。 当 调用 fl10 方 法 时 ， 所 有 没有 闭合 的 形状 都 会 
自动 闭合 ， 所 以 不 需要 调用 closePath() 方 法 ， 但 是 调用 stroke() 时 不 会 自动 闭合 。 


【示例 1】 下 面 示例 绘制 一 个 三 角形 ， 效 果 如 图 4.5 所 示 。 代 码 仅 提供 绘图 函数 draw0， 完 整 代 
码 可 以 参考 4.2.1 节 示例 ， 后 面 各 节 示例 类 似 。 
function drawO { 

Var canvas = document.getElementById('canvas'): 

if (canvas.getContext){ 


} 


Var ctx = canvas.getContext(2d'): 
ctx.beginPathO); 
ctx.moveTo(75.,50): 
ctx.lineTo(100,75):; 
ctx.lineTo(100,25); 

ctx.fill0: 


使 用 moveTo(x, y) 方 法 可 以 将 笔触 移动 到 指定 的 坐标 x 和 y 上 。 当 初始 化 canvas， 或 者 调用 


beginPath0 方 法 后 ， 通常 会 使 用 moveTo0 方 法 重新 设置 起 点 。 
【示例 2】 用 户 可 以 使 用 moveTo0 方 法 绘制 一 些 不 连续 的 路 径 。 下 面 示例 绘制 一 个 笑脸 图 形 ， 效 
| | 果 如 图 4.6 所 示 。 
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图 4.5 绘制 三 角形 图 4.6 绘制 笑脸 
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function drawO { 
Var canvas = document.getElementById('canvas'); 
让 (canvas.getContexb{ 
Var ctx = canVas.getContext(2d): ! f 
ctx.beginPath(); ! 贷 站 


ctx.arc(75,75,50.0.Math PI*2,true): /给 制 | 
ctx.moveTo(110.75): 
ctx.arc(75.75.35.0.Math_PIfalse): // 口 ( 顺 时 针 》 | 
ctx.moveTo(65,65); | 
ctx.arc(60.65,5.0.Math_PI*2,tme): // 左 眼 
ctx.moveTo(95,65):; 

Ctx.arc(90.65,5,0,Math. PI*2,true); // 右 眼 
ctx.strokeO: 





} 
上 面 代码 中 使 用 到 arc0 方 法 ， 调 用 它 可 以 绘制 圆 形 ， 在 后 面 小 节 中 将 详细 说 明 。 


4.2.3 直线 


使 用 lineTo0 方 法 可 以 绘制 直线 ， 用 法 如 下 所 示 : 
lineTo(x,y) 


参数 x 和 y 分 别 表示 终点 位 置 的 x 坐标 和 y 坐标 。lineTo(x, y) 将 绘制 一 条 从 当前 位 置 到 指定 (x, y) 
位 置 的 直线 。 
【示例 】 下 面 示例 将 绘制 两 个 三 角形 ， 一 个 是 填充 的 ， 另 一 个 是 描 边 的 ， 效 果 如 图 4.7 所 示 。 


function drawO { 

Var canvas = document.getElementById('canvas'):; 

if (canvas.getContext){ 
Var ctx = canvas.getContext(2d'): 
// 填 充 三 角形 
ctx.beginPath(); 
ctx.moveTo(25.25): 
ctx.lineTo(105.25): 
ctx.lineTo(25.105): 
ctx.fill0: 
// 描 边 三 角形 
ctx.beginPath(): 
ctx.moveTo(125.125): 
ctx.lineTo(125.45): 
ctx.lineTo(45.125): 
ctx.closePathO: 
ctx.strokeO: 





} 


在 上 面 示例 代码 中 , 从 调用 beginPath0 方 法 准备 绘制 一 个 新 的 形状 路 径 开 始 , 使 用 moveTo0 方 法 
移动 到 目标 位 ， 两 条 线段 绘制 后 构成 三 角形 的 两 条 边 。 当 路 径 使 用 填充 (filled) 时 ， 路 径 自动 闭合 ; 
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| 而 使 用 描 边 (stroked〉 则 不 会 闭合 路 径 。 如 果 没有 添加 闭合 路 径 closePathO0 到 描 边 三 角形 中 ， 则 只 绘 
| 制 了 两 条 线段 ， 并 不 是 一 个 完整 的 三 角形 。 
| 





图 4.7 绘制 三 角形 





使 用 arc0 方 法 可 以 绘制 弧 或 者 圆 ， 用 法 如 下 所 示 : 

context.arc(x, YI sAngle. eAngle, counterclockwise): 

参数 说 明 如 下 : 

x: 圆心 的 x 坐标 。 

y: 圆心 的 y 坐标 。 

r: 圆 的 半径 。 

sAngle: 起 始 角 ， 以 弧度 计 。〔 提 示 : 弧 的 圆 形 的 三 点 钟 位 置 是 0"。) 

eAngle: 结束 角 ， 以 弧度 计 。 

counterclockwise: 可 选 参数 ， 定 义 绘图 方向 。false 为 顺 时 针 ， 为 默认 值 ，true 为 逆 时 针 。 
如 果 使 用 arc0 创 建 圆 ， 可 以 把 起 始 角 设 置 为 0， 结 束 角 设 置 为 2*Math.PI。 

【示例 1】 下 面 示例 绘制 了 12 个 不 同 的 角度 以 及 填充 的 圆 弧 。 主 要 使 用 两 个 for 循环 ， 生 成 圆 弧 





办 因 办 办 办 


的 行列 (xy) 坐标 。 每 一 段 圆 弧 的 开始 都 调用 beginPath0 方 法 。 代 码 中 ， 每 个 圆 弧 的 参数 都 是 可 变 
| 的 ，(xy) 坐标 是 可 变 的 ， 半 径 (radius) 和 开始 角度 (startAngle) 都 是 固定 的 。 结 束 角度 (endAngle) 
| 在 第 一 列 开始 时 是 180”( 半 贺 )， 然 后 每 列 增加 90"*。 最 后 一 列 形成 一 个 完整 的 圆 。 效 果 如 图 48 所 示 。 
| function drawO{ 
| Var canvas = document.getElementById('‘canvas'): 
| if (canvas.getContext){ 
| Var ctx = canvas.getContext(2d'"): 

for(var =0:i<4:iHH){ 
for(var j=0j<3j+n){ 
ctx.beginPathO: 
| Varx =25+j*50; VWx 坐标 值 
| Vary =25+i*50; /y 坐标 值 
| var radius =20; // 圆 弧 半 径 
| varstartAngle eC =0: // 开 始点 
var endAngle = Math PI+(Math.PI*j)/2: // 结 束 点 


var anticlockwise -=i%2=—0 ? false : tue: // 顺 时 针 或 逆 时 针 
Ctx.arc(x. y. radius. startAngle. endAngle. anticlockwise): 
if (ED{ 
ctx.fillO: 
}else{ 
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ctx.strokeO: 
} 
yy 
} 
1 


在 上 面 代码 中 ,“var anticlockwise= 1%2==0 ? false : true; ”语句 作用 于 第 一 、 三 行 是 顺 时 针 的 圆 弧 ， 
anticlockwise 作用 于 二 、 四 行为 逆 时 针 圆 弧 。if 语句 让 一 、 二 行 描 边 圆 弧 ， 下 面 两 行 填充 路 径 。 


| 
使 用 arcTo0 方 法 可 以 绘制 曲线 ， 该 方法 是 lineTo0 的 曲线 版 ， 它 能 够 创建 两 条 切线 之 间 的 弧 或 曲 | 
线 。 用 法 如 下 所 示 : 


context.arcTo(x1,y1,x2,y2,7): 
参数 说 明 如 下 : 

xl: 弧 的 起 点 的 x 坐标 。 
y1: 弧 的 起 点 的 y 坐标 。 





加 加 图 图 加 








【示例 2】 本 例 使 用 lineTo0 和 areTo() 方 法 绘制 直线 和 曲线 ， 然 后 连 成 圆 角 弧 线 


， 效 果 如 图 4.9 


function drawO { 
Var canvas = document.getElementById('canvas'): 
Var ctx = canvas.getContext('2d'): 


ctx.beginPathO: 

ctx.moveTo(20.20): /设置 起 点 
ctx.lineTo(100.20): /绘制 水 平 直线 
ctx.arcTo(150.20.150.70.50): /绘制 曲线 
ctx.lineTo(150.120): // 绘 制 垂 直 直线 
ctx.strokeO: // 开 始 绘制 
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图 4.8 绘制 加 和 弧 
4.2.5 二 次 方 曲线 


图 4.9 绘制 圆 角 弧 线 


使 用 quadraticCurveTo0 方 法 可 以 绘制 二 次 方 贝 塞 尔 曲线 ， 用 法 如 下 。 
context.quadraticCurveTo(cpx.cpy.x.y): 
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cpx: 贝 塞 尔 控制 点 的 x 坐标 。 

cpy: 贝 塞 尔 控制 点 的 y 坐标 。 

x: 结束 点 的 x 坐标 。 

| y: 结束 点 的 y 坐标 。 

Note 次 方 贝 塞 尔 曲线 需要 两 个 点 。 第 一 个 点 是 用 于 二 次 贝 塞 尔 计算 中 的 控制 点 ， 第 二 个 点 是 曲线 的 
| 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 需 要 使 用 beginPathO 和 moveTo0 
| 方法 来 定义 开始 点 ， 演 示 说 明 如 图 4.10 所 示 。 


开始 点 (20,20) 结束 点 (200,20) 


图 图 罗 网 

















控制 点 (20,100) 


图 4.10 二 次 方 贝 塞 尔 曲线 演示 示意 图 


| 
| 
| 
| 
| 
| 
| 第 1 步 ， 确 定 开始 点 ， 如 moveTo(20,20)。 
| 第 2 步 ， 定 义 控制 点 ， 如 quadraticCurveTo(20,100, x ,y )。 
| 第 3 步 ， 定 义 结束 点 ， 如 quadraticCurveTo(20,100,200,20)。 
| 【示例 1】 下 面 示例 先 绘制 一 条 二 次 方 贝 塞 尔 曲线 ， 再 绘制 出 其 控制 点 和 控制 线 。 
| function drawO { 
| Var canvas = document.getElementById('‘canvas'): 
| Var ctx=canvas.getContext("2d"): 
| /下 面 开始 绘制 二 次 方 贝 塞 尔 曲线 
| ctx.strokeStyle="dark": 
| ctx.beginPathO: 
| ctx.moveTo(0.200): 
| ctx.quadraticCurveTo(75.50.300.200): 
| ctx.strokeO:; 
| ctx.globalCompositeOperation="source-Over": 
| // 绘 制 直线 ， 表 示 曲 线 的 控制 点 和 控制 线 ， 控 制 点 坐标 即 两 直线 的 交点 (75.50) 
| ctx.strokeStyle="#ff00fF"; 
| ctx.beginPath(): 
ctx.ImoveTo(75.50): 
ctx.lineTo(0.200): 
| ctx.moveTo(75.50): 
| ctx.lineTo(300.200): 
| ctx.strokeO: 
| 





| 在 浏览 器 中 的 运行 效果 如 图 4.11 所 示 ， 其 中 曲线 即 为 二 次 方 贝 塞 尔 曲线 ， 
| 两 条 直线 为 控制 线 ， 两 直线 的 交点 即 为 曲线 的 控制 点 。 

| 【示例 2】 下 面 示例 组 合 直线 和 二 次 方 曲线 ， 封 装 了 一 个 圆 角 矩 形 函 数 ， 
| 使 用 它 可 以 绘制 圆 角 算 形 图 形 ， 效 果 如 图 4.12 所 示 。 

| 具体 代码 解析 请 扫 码 学 习 。 线 上 阅读 





.84 。 





第 全 章 ITNMA5 绘 图 和 动画 3 





图 4.11 “二 次 方 贝 塞 尔 曲线 及 其 控制 点 图 4.12 绘制 圆 角 箱 形 
4.2.6 三 次 方 曲线 


使 用 bezierCurveTo0 方 法 可 以 绘制 三 次 方 贝 塞 尔 曲 线 ， 用 法 如 下 。 
context.bezierCurveTo(cplx.cply.cp2x.cp2y,x,y): 

参数 说 明 如 下 : 

cplx: 第 一 个 贝 塞 尔 控制 点 的 x 坐标 。 

cply: 第 一 个 贝 塞 尔 控制 点 的 y 坐标 。 

cp2x: 第 二 个 贝 塞 尔 控 制 点 的 x 坐标 。 

cp2y: 第 二 个 贝 塞 尔 控制 点 的 y 坐标 。 

x: 结束 点 的 x 坐标 。 

y: 结束 点 的 y 坐标 。 

三 次 方 贝 塞 尔 曲 线 需 要 三 个 点 ， 前 两 个 点 是 用 于 三 次 贝 塞 尔 计算 中 的 控制 点 ， 第 三 个 点 是 曲线 的 
结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 , 如 果 路 径 不 存在 , 需要 使 用 beginPathO 和 moveTo0 
方法 来 定义 开始 点 ， 演 示 说 明 如 图 4.13 所 示 。 

操作 步骤 如 下 : 

第 1 步 ， 确 定 开始 点 ， 如 moveTo(20,20)。 

第 2 步 ， 定 义 第 一 个 控制 点 ， 如 bezierCurveTo(20, 100, cp2x, cp2y, x, y)。 

第 3 步 ， 定 义 第 二 个 控制 点 ， 如 bezierCurveTo(20,100,200,100, x, y)。 

第 4 步 ， 定 义 结束 点 ， 如 bezierCurveTo(20,100,200,100,200,20)。 

【示例 】 下 面 示例 绘制 了 一 条 三 次 方 贝 塞 尔 曲线 ， 还 绘制 出 了 两 个 控制 点 和 两 条 控制 线 。 
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Var canvas = document.getElementById('‘canvas'): 
Var ctx=canvas.getContext("2d"): 

/下 面 开始 绘制 三 次 方 贝 塞 尔 曲线 
ctx.strokeStyle="dark":; 

ctx-beginPathO: 

ctx.moveTo(0.200): 
ctx.bezierCurveTo(25.50.75.50.300.200): 
ctx.stroke(); 
ctx.globalCompositeOperation="source-Over": 
/下 面 绘制 直线 ， 用 于 表示 上 面 曲线 的 控制 点 和 控制 线 ， 控 制 点 坐标 为 《25.50) 和 (75.50) 
ctx.strokeStyle="#fF00fF": 
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ctx.beginPath(); 

ctx.moveTo(25.,50): 

ctx.lineTo(0,200): 

pF ctx.moveTo(75.,50); 

仿 7 ctxlineTo(300.200): 
| ctx.strokeO: 





开始 点 (20,20) 结束 点 (200,20) 
控制 点 1 (20,100) 控制 点 2 (200, 100) 
图 4.13 三 次 方 贝 塞 尔 曲线 演示 示意 图 图 4.14 三 次 方 贝 塞 尔 曲线 


4.3 定义 样式 和 颜色 


| canvas 支持 很 多 颜色 和 样式 选项 ， 如 线 型 、 渐 变 、 图 案 、 透 明度 和 阴影 。 本 节 将 介绍 样式 的 设置 
| 方法 。 


4.3.1 颜色 


使 用 fillStyle 和 strokeStyle 属性 可 以 给 图 形 上 色 。 其 中 , fillStyle 设置 图 形 的 填充 颜色 , strokeStyle 
| 设置 图 形 轮廓 的 颜色 。 
| 颜色 值 可 以 是 表示 CSS 颜色 值 的 字符 串 , 也 可 以 是 渐变 对 象 或 者 图 案 对 象 (参考 下 面 小 节 介绍 )。 
| 默认 情况 下 ， 线 条 和 填充 颜色 都 是 黑色 ，CSS 颜色 值 为 #000000。 
一 旦 设置 了 strokeStyle 或 fillstyle 的 值 ， 那 么 这 个 新 值 就 会 成 为 新 绘制 的 图 形 的 默认 值 。 如 果 要 
| 给 每 个 图 形 定义 不 同 的 颜色 ， 就 需要 重新 设置 flStyle 或 strokeStyle 的 值 。 
【示例 1】 本 例 使 用 嵌 套 for 循环 绘制 方 格 阵列 ， 每 个 方 格 填充 不 同色 ， 效 果 如 图 4.15 所 示 。 
| function drawO { 
| Var ctx = document.getElementById('canvas').getContext(2d): 
| 
| 





for (var i=0:i<6:i++){ 
| for (var =0:j<6:j+HD{ 
| ctx.fillStyle = Teb( + Math floor(255-42.5*i) +",' + Math.floor(255-42.5*]) + 0) 
| ctx fillRect(j*25.1*25.25.25): 
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在 嵌 套 for 结构 中 ， 使 用 变量 i 和 j 为 每 个 方 格 产生 唯一 的 RGB 色彩 值 ， 其 中 仅 修改 红色 和 绿 | 
色 通 道 的 值 ， 而 保持 蓝 色 通道 的 值 不 变 。 可 以 通过 修改 这 些 颜色 通道 的 值 来 产生 各 种 各 样 的 色 板 。 通 | 


过 增加 渐变 的 频率 ， 可 以 绘制 出 类 似 Photoshop 调 色 板 的 效果 。 | 
【示例 2】 下 面 示例 与 示例 1 有 点 类 似 ， 但 使 用 strokeStyle 属性 ， 画 的 不 是 方 格 ， 而 是 用 are0 | 
方法 画 圆 ， 效 果 如 图 4.16 所 示 。 | 


function drawO { 
Var ctx = document getElementById(canvas').getContext(2d): 
for (var i=0:1<6:i++){ 
for (var j=0:j<6j+H){ 

ctx.strokeStyle = rgb(0,' + Math.floor(255-42.5*i) + + Math.floor(255-42.5*]) + )'; 
ctx.beginPath(): 
Ctx.arc(12.5+j*25.12.5+i*25,10,0,Math.PI*2,true); 
ctx.stroke(): 
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图 4.15 绘制 渐变 色 块 图 4.16 绘制 渐变 圆圈 
4.3.2 不 透明 度 


ol 
使 用 globalAlpha 全 局 属性 可 以 设置 绘制 图 形 的 不 透明 度 ， 另 外 也 可 以 通过 色彩 的 不 透明 度 参数 | 视频 讲解 
来 为 图 形 设置 不 透明 度 ， 这 种 方法 相对 于 使 用 globalAlpha 属性 来 说 ， 会 更 灵活 些 。 
使 用 rgba0 方 法 可 以 设置 具有 不 透明 度 的 颜色 ， 用 法 如 下 。 
IEba(R.GB.A) 


其 中 R、G、B 将 颜色 的 红色 、 绿 色 和 蓝 色 成 分 指定 为 0 一 255 的 十 进 制 整数 ，A 把 alpha (不 透 
明 ) 成 分 指定 为 0.0 和 1.0 之 间 的 一 个 浮 点 数值 ，0.0 为 完全 透明 ，1.0 为 完全 不 透明 。 例 如 ， 可 以 用 
"Tgba(255,0,0,0.5)" 表 示 半 透明 的 完全 红色 。 | 
【示例 1】 下 面 示例 使 用 四 色 格 作为 背景 ， 设 置 globalAlpha 为 0.2 后 ， 在 上 面 画 一 系列 半径 递 | 
增 的 半 透 明 圆 ， 最 终结 果 是 一 个 径 向 渐变 效果 ， 如 图 4.17 所 示 。 圆 贰 加 得 越 多 ， 原 先 所 画 的 圆 的 透 
明度 会 越 低 。 通 过 增加 循环 次 数 ， 画 更 多 的 圆 ， 背 景 图 的 中 心 部 分 会 完全 消失 。 
function drawO { 
Var ctx = document.getElementById(canvas).getContext(2d): 
// 画 背景 
ctx.fillstyle = #FDO'; 
ctx.fillRect(0.0.75.75); 
ctx.fillStyle = #6CO': 
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| ctx fillRect(75.0.75.75): 

| ctx fillStyle = #09F': 

| ctx fillRect(0.75.75.75); 

ctx.fillStyle = #F30': 

ctx fillRect(75.75,75.75): 

ctx fillStyle = WFFF': 

// 设 置 透明 度 值 

ctx.globalAlpha = 0.2: 

// 画 半 透 明 圆 

for (var i=0;1<7:i++) 
ctx.beginPath(); 
ctx.arc(75.75.10+10*i.0.Math PI*2.,true): 
ctx.fill0; 


【示例 2】 本 例 与 示例 1 类 似 ， 不 过 不 是 画 圆 ， 而 是 画 矩 形 。 这 里 还 可 以 看 出 ， 
rgba0 可 以 分 别 设置 轮廓 和 填充 样式 ， 因 而 具有 更 好 的 可 操作 性 和 使 用 灵活 性 ， 效 果 
如 图 4.18 所 示 。 

线 上 阅读 具体 代码 解析 请 扫 码 学 习 。 
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图 4.17 用 globalAlpha 设置 不 透明 度 图 4.18 用 rgba( 方 法 设置 不 透明 度 
4.3.3 实 线 


1. 线 的 粗细 
使 用 lineWidth 属性 可 以 设置 线条 的 粗细 ， 取 值 必须 为 正 数 ， 默 认为 1.0。 
【示例 1】 下 面 示例 使 用 for 循环 绘制 了 12 条 线 宽 依次 递增 的 线段 ， 效 果 如 图 4.19 所 示 。 
function drawO { 
Var ctx = document.getElementById(canvas').getContext(2d): 
for (vari= 0;i< 12: i++H{f 
ctx.strokeStyle="red": 
ctx.lineWidth = 1+i: 
ctx.beginPath():; 
ctx.moveTo(S.5+i*14): 
ctx.lineTo(140.S+i#*14): 
ctx.strokeO: 
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2. 端点 样式 


lineCap 属性 用 于 设置 线段 端点 的 样式 ， 包 括 三 种 样式 ， butt、round 和 square， 默 认 值 为 butt。 | 

【示例 2】 下 面 示 例 绘制 了 三 条 蓝 色 的 直线 段 ， 并 依次 设置 上 述 三 种 属性 值 ， 两 侧 有 两 条 红色 的 | 
参考 线 ， 以 方便 观察 ， 预 览 效 果 如 图 4.20 所 示 。 可 以 看 到 这 三 种 端点 样式 从 上 到 下 依次 为 平头 、 
头 和 方 头 。 


function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d): 1 
varlineCap = [butt,round'.square]: | 
/绘制 参考 线 | 
ctx.strokeStyle = 'red'; 
ctx.beginPathO: 
ctx.moveTo(10.10): | 
ctx.lineTo(10,150); | 
ctxmoveTo(150.10): | 
ctxlineTo(150.150): | 
ctx.strokeO:; | 
/绘制 直线 段 | 

ctx.strokeStyle = 'blue'; 

for (var i=0:i<lineCap length:it+){ | 
ctx.lineWidth = 20; 
ctx.lineCap = lineCap[i]: 
ctx.beginPath(): 
ctx.moveTo(10,30+1*50): 
ctx.lineTo(150,30+i*50); 
ctx.strokeO: 













4.19 lineWidth 示例 图 4.20 lineCap 示例 | 


3. 连接 样式 
lineJoin 属性 用 于 设置 两 条 线段 连接 处 的 样式 , 包括 三 种 样式 :round、bevel 和 miter, 默认 值 为 miter。 
【示例 3】 下 面 示例 绘制 了 三 条 蓝 色 的 折线 ， 并 依次 设置 上 述 三 种 属性 值 ， 观 察 拐角 处 〈 即 直线 
段 连接 处 ) 样式 的 区 别 。 在 浏览 器 中 的 预览 效果 如 图 4.21 所 示 。 
function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d): 
var lineJoin = [round.bevel.miter]: 
ctx.strokeStyle = 'blue'; 
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| for (var i=0:i<lineJoin length:i++){ 
| ctx.lineWidth = 25: 
| ctx lineJoin = lineJoin[]: 


| ctx.beginPathO): 
仿 F | | ctx.moveTo(10+i*150,30): 
| ctx.lineTo(100+i*150.30): 
ctx.lineTo(100+i150.100): 
ctx.strokeO: 


4. 交点 方式 
miterLimit 属性 用 于 设置 两 条 线段 连接 处 交点 的 绘制 方式 , 其 作用 是 为 斜面 的 长 度 设置 一 个 上 限 ， 
默认 为 10， 即 规定 斜面 的 长 度 不 能 超过 线条 宽度 的 10 倍 。 当 斜面 的 长 度 达到 线条 宽度 的 10 倍 时 ， 
就 会 变 为 斜 角 。 如 果 lineJoin 属性 值 为 round 或 bevel 时 ，miterLimit 属性 无 效 。 
【示例 4】 通 过 下 面 示例 可 以 观察 当 角度 和 miterLimit 属性 值 发 生变 化 时 斜面 长 度 的 变化 。 在 运 
行 代码 之 前 ， 也 可 以 将 miterLimit 属性 值 改 为 固定 值 ， 以 观察 不 同 的 值 产 生 的 结果 ， 效 果 如 图 4.22 
function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d): 
for (var 二 1:i<10:iHH){ 
ctx.strokeStyle = "blue' 
ctx.lineWidth = 10; 
ctx.lineJoin = "miter': 
ctx.miterLimit = i*10:; 
ctx.beginPathO: 
ctx.moveTo(10,1*30); 
ctx.lineTo(100.1*30): 
ctx.lineTo(10.33*: 
ctx.strokeO; 





图 4.21 lineJoin 示例 图 4.22 miterLimit 示例 


4.3.4 ”虚线 





解 | 使 用 setLineDash0 方 法 和 lineDashOffset 属性 可 以 定义 虚线 样式 .setLineDash() 方 法 接收 一 个 数组 
」 来 指定 线段 与 间隙 的 交 蔡 ，lineDashOffset 属性 设置 起 始 偏 移 量 。 
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【示例 】 下 面 示例 绘制 一 个 矩形 虚线 框 ， 然 后 使 用 定时 器 设计 每 隔 0.5 秒 重 绘 一 次 ， 重 绘 时 改变 | 
lineDashOffset 属性 值 ， 从 而 创建 一 个 行军 蚁 的 效果 ， 效 果 如 图 4.23 所 示 。 | 


Var ctx = document.getElementById(‘canvas').getContext(2d"): 
Var offset = 0: 


ctx.clearRect(0.0. canvas.width. canvas.height): | 
re 





ctx.lineDashOffset = -offset: | 
ctx.strokeRect(50,50, 200, 100): | 


} | 

function marchO { | 

offset++:; | 

让 (offset> 16) { | 

offset= 0; | 

3 | 

drawO; ! 

setTimeout(march., 100): | 

上 | 
march(); 


DY localhost 8090/mysits # 


C © localhosts080/mysite 





图 4.23 设计 动态 虚线 框 
< 所 注意 : 在 本 浏览 器 中 ， 从 IE 11 开始 才 支 持 setLineDash0 方 法 和 lineDashOffset 属性 。 


4.3.5 ”线性 渐变 


要 绘制 线性 渐变 ， 首 先 使 用 createLinearGradient(0 方 法 创建 canvasGradient 对 象 ， 然 后 使 用 
addColorStop0 方 法 进行 上 色 。 

createLinearGradient() 方 法 的 用 法 如 下 所 示 : 

context.createLinearGradient(x0.y0.x1.y1): 


参数 说 明 如 下 : 

加 ”x0: 渐变 开始 点 的 x 坐标 。 

y0: 渐变 开始 点 的 坐标 。 

x1: 渐变 结束 点 的 x 坐标 。 

y1: 渐变 结束 点 的 y 坐标 。 
addColorStop0 方 法 的 用 法 如 下 所 示 : 


gradient.addColorStop(stop.colon): 








视频 讲解 
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参数 说 明 如 下 : 
stop: 介 于 0.0 与 1.0 的 值 ， 表 示 渐 变 中 开始 与 结束 之 间 的 相对 位 置 。 渐 变 起 点 的 偏 移 值 为 


会 内 | color: 在 结束 位 置 显示 的 CSS 颜色 值 。 

we 【示例 】 下 面 示例 演示 如 何 绘制 线性 渐变 。 在 本 例 中 共 添 加 了 8 个 色 标 ， 分 别 为 红 、 橙 、 黄 、 绿 、 
青 、 蓝 、 紫 、 红 ， 预 览 效果 如 图 4.24 所 示 。 
| fnnction drawO { 
| Var ctx = document getElementById('canvas').getContext(2d): 
Var lingrad = ctx.createLinearGradient(0,0.0.200); 
lingrad.addColorStop(0. #ff00007: 
lingrad.addColorStop(1/7, #fp9900); 
lingrad.addColorStop(2/7, #fftf00): 
lingrad.addColorStop(3/7, #00fF00"); 
lingrad.addColorStop(4/7., #00fFP): 
lingrad.addColorStop(5/7. #0000fP): 
lingrad.addColorStop(6/7, ‘#fF00 人 ff ); 
lingrad.addColorStop(1. #ff0000"): 
ctx.fillStyle = lingrad: 
ctx.strokeStyle = lingrad:; 
ctx.fillRect(0.0,300,200); 





4.24 绘制 线性 渐变 


使 用 addColorStop0) 方 法 可 以 添加 多 个 色 标 ， 色 标 可 以 在 0 一 1 任意 位 置 添 加 ， 例 如 ， 从 0.3 处 开 
| 始 设置 一 个 蓝 色色 标 ， 再 在 0.5 处 设置 一 个 红色 色 标 ， 则 0 一 0.3 都 会 填充 为 蓝 色 。0.3 一 0.5 为 蓝 色 到 
| 红色 的 渐变 ，0.5 一 1 则 填充 为 红色 。 


4.3.6 径 向 渐变 





要 绘制 径 向 渐变 ， 首 先 需 要 使 用 createRadialGradient0 方 法 创建 canvasGradient 对 象 ， 然 后 使 用 
| addColorStop0 方 法 进行 上 色 。 

| createRadialGradient(0 方 法 的 用 法 如 下 。 

| context.createRadialGradient(x0.y0.r0.x1.y1.r1): 

| 参数 说 明 如 下 : 

| x0: 渐变 的 开始 圆 的 x 坐标 。 

| y0: 渐变 的 开始 圆 的 y 坐标 。 
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r0: 开始 圆 的 半径 。 
x1: 渐变 的 结束 圆 的 x 坐标 。 
y1: 渐变 的 结束 圆 的 y 坐标 。 
Il1: 结束 圆 的 半径 。 

【示例 】 下 面 示例 使 用 径 向 渐变 在 画布 中 央 绘 制 一 个 圆 球 形状 ， 预 览 效果 如 图 4.25 所 示 。 
function drawO { | 
Var ctx = document getElementById(canvas').getContext(2d): ! 
// 创 建 渐变 | 
Var radgrad = ctx.createRadialGradient(150.,100.0,150.100.,100); 
radgrad.addColorStop(0. #A7D30C"): 
radgrad.addColorStop(0.9, #019F62"); 
radgrad.addColorStop(1. rgba(1.159.98.0)7: 

// 填 充 渐 变色 
ctx.fillStyle = radgrad; 
ctx.fillRect(0.0,300.200); 





图 罗网 网 














4.25 绘制 径 向 渐变 


4.3.7 图案 


使 用 createPattern(0 方 法 可 以 绘制 图 案 效果 ， 用 法 如 下 所 示 。 
context.createPattern(image,. "repeatlrepeat-xlrepeat-ylno-repeat"): 
参数 说 明 如 下 : 
image: 规定 要 使 用 的 图 片 、 画 布 或 视频 元 素 。 
repeat: 默认 值 。 该 模式 在 水 平和 垂直 方向 重复 。 
repeat-x: 该 模式 只 在 水 平方 向 重复 。 
repeat-y: 该 模式 只 在 垂直 方向 重复 。 
no-repeat: 该 模式 只 显示 一 次 〈 不 重复 ) 。 
创建 图 案 的 步骤 与 创建 渐变 有 些 类 似 ， 需 要 先 创建 出 一 个 pattern 对 象 , 然后 将 其 赋予 flStyle 属 
性 或 strokeStyle 属性 。 
【示例 】 下 面 示例 以 一 幅 png 格式 的 图 像 作 为 image 对 象 用 于 创建 图 案 ， 以 平 铺 方式 同时 沿 x 
轴 与 y 轴 方向 平 铺 。 在 浏览 器 中 的 预览 效果 如 图 4.26 所 示 。 
function drawO { 
Var ctx = document.getElementById(‘canvas').getContext(2d"): 
// 创 建 用 于 图 案 的 新 image 对象 
Var img = new Image(): 








图 图 图 加 加 
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img.src = 'images/].png : 
img.onload = fnctionO{ 

// 创 建 图 案 

var ptrn = ctx.createPattem(img.repeat): 
ctx.fillStyle = ptm: 

| ctx.fillRect(0.0.600,600): 





图 4.26 绘制 图 案 


4.3.8 阴影 


创建 阴影 需要 4 个 属性 ， 简 单 说 明 如 下 : 

shadowColor: 设置 阴影 颜色 。 

shadowBlur: 设置 阴影 的 模糊 级 别 。 

shadowOffsetX: 设置 阴影 在 x 轴 的 偏 移 距离 。 
shadowOffsetY: 设置 阴影 在 y 轴 的 偏 移 距离 。 

【示例 】 下 面 示例 演示 创建 文字 阴影 效果 ， 如 图 4.27 所 示 。 


function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d'"): 
/设置 阴影 
ctx.shadowOffsetX = 4: 
ctx.shadowOffsetY = 4: 
ctx.shadowBlur = 4: 
ctx.shadowColor = "rgba(0. 0. 0. 0.5)": 
/绘制 文本 
ctx.font = "60px Times New Roman": 
ctx.fillStyle = "Black": 
ctx.fillText("Canvas API". S. 80): 


Canvas API 





图 4.27 为 文字 设置 阴影 效果 
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Kd 
4.3.9 填充 规则 


| 回 
前 面 介绍 了 使 用 Gil 方法 可 以 填充 图 形 ， 该 方法 可 以 接收 两 个 值 ， 用 来 定义 填充 规则 。 取 值 说 明 | 加 虎 
如 下 : | 
"nonzero": 非 零 环 绕 数 规则 ， 为 默认 值 。 
"evenodd": 奇偶 规则 。 
填充 规则 根据 某 处 在 路 径 的 外 面 或 者 里 面 来 决定 该 处 是 否 被 填充 , 这 对 于 路 径 相 交 或 者 路 径 被 嵌 | 
套 的 时 候 是 有 用 的 。 | 
【示例 】 下 面 示例 使 用 evenodd 规则 填充 图 形 ， 则 效果 如 图 4.28 所 示 ， 默 认 填充 效果 如 图 4.29 | 
所 示 。 
function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d'"); 
ctx.beginPath(): 
ctx.arc(50, 50, 30. 0, Math.PI*2, true); 
ctx.arc(50, 50, 15. 0. Math.PI*2. true); 
ctx.fill("evenodd"): 





DD localhost80g0/mysite D lecalhostB090/mysite X 


CC © Iocanosta0a0/mysite/te i © © localhosteoe0/mysite/te 
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4.28 evenodd 规则 填充 图 4.29 nonzero 规则 填充 
< 负 注 意 : IE 暂 不 支持 evenodd 规则 填充 。 





44 图 形变 形 


本 节 将 介绍 如 何 对 画布 进行 操作 以 及 如 何 对 画布 中 的 图 形 进行 变形 ， 以 便 设 计 复杂 图 形 。 
4.4.1 保存 和 恢复 状态 


Canvas 状态 存储 在 栈 中 ， 一 个 绘画 状态 包括 两 部 分 。 | 
当前 应 用 的 变形 , 如 移动 、 旋转 和 缩放 , 包括 的 样式 属性 : strokeStyle、fillStyle、globalAlpha、 | 
lineWidth、 lineCap、 lineJoin、miterLimit、shadowOffsetX、 shadowOffsetY、shadowBlur、 
shadowColor、globalCompositeOperation。 
回 ”当前 的 裁 切 路 径 ， 参 考 4.5 节 介 绍 。 
使 用 save0 方 法 ， 可 以 将 当前 的 状态 推送 到 栈 中 保存 ， 使 用 restore0 方 法 可 以 将 上 一 个 保存 的 状 
态 就 从 栈 中 弹出 ， 恢 复 上 一 次 所 有 的 设置 。 
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【示例 】 下 面 示例 先 绘制 一 个 矩形 ， 填 充 颜色 为 #H00ff， 轮 廓 颜色 为 蓝 色 ， 然 后 保存 这 个 状态 ， 


| 再 绘制 另外 一 个 矩形 ， 填 充 颜 色 为 #ff0000， 轮廓 颜色 为 绿色 ,最 后 恢复 第 一 个 算 形 的 状态 ， 并 绘制 两 
| 个 小 的 矩形 ， 则 其 中 一 个 矩形 填充 颜色 必 为 #f00 全 ， 另 外 和 矩形 轮廓 颜色 必 为 蓝 色 ， 因 为 此 时 已 经 恢复 











了 原来 保存 的 状态 ， 所 以 会 沿用 最 先 设 定 的 属性 值 ， 预 览 效果 如 图 4.30 所 示 。 


function drawO { 
Var ctx = document getElementById(canvas').getContext(2d): 
/开始 绘制 矩形 
ctx.fillStyle="#ft00ff 
ctx.strokeStyle="blue":; 
ctx.fillRect(20,20,100,100); 
ctx.strokeRect(20,20,100,100); 
ctx.fill0; 
ctx.stroke(); 
// 保 存 当 前 canvas 状态 
ctx.save(); 
/绘制 另外 一 个 矩形 
ctx.fillStyle="#ff0000": 
ctx.strokeStyle="green": 
ctx.fillRect(140,20,100.100): 
ctx.strokeRect(140,20,100,100): 
ctx.fill0; 
ctx.strokeO); 
/恢复 第 一 个 矩形 的 状态 
ctxITestore0: 
/绘制 两 个 矩形 
ctx.fillRect(20,140.50,50):; 
ctx.strokeRect(80,140.50.50): 





图 4.30 保存 与 恢复 canvas 状态 
清除 画布 
使 用 clearRectO 方 法 可 以 清除 指定 区 域内 的 所 有 图 形 ， 显 示 画 布 背景 ， 该 方法 用 法 如 下 。 
context.clearRect(x.y.width.height): 
参数 说 明 如 下 : 
x: 要 清除 的 矩形 左上 角 的 x 坐标 。 
y: 要 清除 的 矩形 左上 角 的 y 坐标 。 
width: 要 清除 的 矩形 的 宽度 ， 以 像素 计 。 
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height: 要 清除 的 年 形 的 高 度 ， 以 像素 计 。 

【示例 】 下 面 示例 演示 了 如 何 使 用 clearRect() 方 法 来 擦 除 画布 中 的 绘图 。 
<canvas id="canvas" width="300" height="200" style="border:solid 1px #999:"></canvas> 
<input name="" type="button” value=" 清 空 画 布 " onClick="clearMapO:"> 
<script> 
Var ctx = document.getElementById('canvas'").getContext(2d"): 
ctx.strokeStyle="#FFOOFF"; 
ctx.beginpath(); | 
ctx.arc(200.,150,100,-Math.PI*1/6.-Math.PI*5/6.,true); 
ctx.stroke(); 
function clearMapO { 

SEX.clearRect(0.0.300.200): 

} 


</script> 
在 浏览 器 中 的 预览 效果 如 图 4.31 所 示 ， 先 是 在 画布 上 绘制 一 段 弧 线 。 如 果 单 各 
钮 ， 则 会 清除 这 段 弧 线 ， 如 图 4.32 所 示 。 








“清空 画布 ” 按 


[uy 


CG -refocahe.. - EC | B ioc ba) © S mp/ocsho- - EC) Sica 








图 4.31 绘制 弧 线 图 4.32 清空 画布 


4.4.3 ”移动 坐标 
在 默认 状态 下 ， 画 布 以 左上 角 〈0.0) 为 原点 作为 绘图 参考 。 使 用 translate0 方 法 可 以 移动 坐标 原 尼 
点 ， 这 样 新 绘制 的 图 形 就 以 新 的 坐标 原点 为 参考 进行 绘制 。 其 用 法 如 下 。 
context.translate(dx. dy): 
参数 dx 和 dy 分 别 为 坐标 原点 沿 水 平和 垂直 两 个 方向 的 偏 移 量 ， 如 图 4.33 所 示 。 
< 所 注意 : 在 使 用 translate0 方 法 之 前 ,应 该 先 使 用 save( 方 法 保存 画布 的 原始 状态 。 当 需要 时 可 以 使 | 
用 testore() 方 法 恢复 原始 状态 ， 特 别 是 在 重复 绘图 时 非常 重要 。 
【 示例】 下面 示例 综合 运用 了 save0、restore0 、translate() 方 法 来 绘制 一 个 伞 状 图 形 。 


<canvas id="canvas" width="600" height="200" style="border:solid 1px #999:"></canvas> 
<script> 








Var Ctx = document.getElementById('canvas').getContext(2d"): 
/注意 : 所 有 的 移动 都 是 基于 这 一 上 下 文 
ctx.translate(0.80): 


9g7* 


名 Fristesss mm 和 站 开 半 天 ( 敌 各 本 风 ) 
| 好 之 
| for (var =L:i<10:i){ 
| ctx.save(): 
| ctx.translate(60*i, 0): 
| drawTop(ctx."reb("+(30*1)+","+(255-30*1)+".255)"); 
全 drawGrip(ctx): 
“| ctx.restore|; 


| /绘制 伞 形 顶部 半圆 

function drawTop(ctx, fillStyle){ 
ctx.fillstyle = fillStyle: 
ctx.beginPath(): 
ctx.arc(0. 0, 30, 0.Math.PL.true); 
ctx.closePath(): 
ctx.fill(); 


| 

| 

| 

| 

| 

ee 

| /绘制 伞 形 底部 手柄 

| fanction drawGrip(ct){ 

| ctx.Save0: 

| ctx.fillStyle = "blue":; 

| ctx.fillRect(-1.5. 0. 1.5. 40); 

| ctx.beginPath(0): 

| ctx.strokeStyle="blue"; 

| ctx.arc(-5, 40. 4. Math PI.Math PI*2.true): 

| ctx.strokeO: 

| ctx.closePath(); 

| ctx.restore(): 

| } 

| </script> 

在 浏览 器 中 的 预览 效果 如 图 4.34 所 示 。 可 见 ，canvas 中 图 形 移 动 的 实现 ， 其 实 是 通过 改变 画布 
| 的 坐标 原点 来 实现 的 ， 所 谓 的 “移动 图 形 ”， 只 是 “看 上 去 ”的 样子 ， 实 际 移动 的 是 坐标 空间 。 领 会 
| 并 掌握 这 种 方法 ， 对 于 随心 所 欲 地 绘制 图 形 非 常 有 帮助 。 

| (0, 0) 
| 
| 
| 
| 
| 





X 
dy 
国人 
| 图 433 ”坐标 空间 的 偏 移 示意 图 图 4.34 ”移动 坐标 空间 


4.4.4 旋转 坐标 
使 用 rotate0 方 法 可 以 以 原点 为 中 心 旋转 canvas 上 下 文 对 象 的 坐标 空间 ， 其 用 法 如 下 。 
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context.rotate(angle): | 
rotate() 方 法 只 有 一 个 参数 ， 即 旋转 角度 angle， 旋 转角 度 以 顺 时 针 方 向 为 正方 向 ， 以 弧度 为 单位 ，| 
旋转 中 心 为 canvas 的 原点 ， 如 图 4.35 所 示 。 
(0, 0) 





图 4.35 以 原点 为 中 心 旋 转 canvas 


容 提示 : 如 需 将 角度 转换 为 弧度 ， 可 以 使 用 degrees*Math PI180 公式 进行 计算 。 例如， 如果 要 旋 
转 5”， 可 套用 这 样 的 公式 : 5*Math.PI/180。 


【示例 】 在 上 节 示 例 的 基础 上 ， 下 面 示例 设计 在 每 次 开始 绘制 图 形 之 前 ， 先 将 坐标 空间 旋转 
PI*(2/4+i/4)， 再 将 坐标 空间 沿 y 轴 负 方向 移动 100， 然 后 开始 绘制 图 形 ， 从 而 实现 使 图 形 沿 一 中 心 点 
平均 旋转 分 布 。 在 浏览 器 中 的 预览 效果 如 图 4.36 所 示 。 

function drawO { 

Var ctx = document.getElementById('canvas').getContext(2d): 

ctx.translate(150.150): 

for (var i=1:i<9:iH){ 
Ctx.save(); 
ctx.rotate(Math.PI*(2/4+i/4)): 
ctx.translate(0,-100): 
drawTop(ctx."reb("+(30*i)+","+(255-30*1)+".255)"): 
drawGrip(ctx); 
ctx.restore(); 








4.36 ”旋转 坐标 空间 


。99 。 


gm yo A wm 汉 芋 通 (共处 本 才 友 ) 


4.4.5 缩放 图 形 
使 用 scale0 方 法 可 以 增 减 canvas 上 下 文 对 象 的 像素 数目 ， 从 而 实现 图 形 的 放大 或 缩小 , 其 用 法 








其 中 x 为 横 轴 的 缩放 因子 ，y 轴 为 纵 轴 的 缩放 因子 ， 值 必须 是 正 值 。 如 果 需 要 放大 图 形 ， 则 将 参 

| 数值 设置 为 大 于 1 的 数值 ， 如 果 需 要 缩小 图 形 ， 则 将 参数 值 设置 为 小 于 1 的 数值 ， 当 参数 值 等 于 1 时 
| 则 没有 任何 效果 。 
| 【示例 】 下 面 示例 使 用 scale(0.95,0.95) 来 缩小 图 形 到 上 次 的 0.95， 共 循环 80 次 ， 同 时 移动 和 旋 
| 转 坐 标 空间 ， 从 而 实现 图 形 呈 螺旋 状 由 大 到 小 的 变化 ， 预 览 效果 如 图 4.37 所 示 。 
| function drawO { 
| Var ctx = document.getElementById('canvas').getContext('2d'"): 
ctx-translate(200.20): 
for (var 二 1:i<80:i+H){ 

ctx.save(); 

ctx.translate(30,30); 

ctx.scale(0.95.0.95); 

ctx.rotate(Math.PL/12): 

ctEx.beginPathO: 

ctx.fillStyle="red"; 

ctx.globalAlpha="0.4"; 

ctx.arc(0,0,50,0,Math.PI*2.,trme); 

ctx.closePathO: 

ctx.fill0; 








4.37 缩放 图 形 


4.4.6 变换 图 形 
transform0 方 法 可 以 同时 缩放 、 旋 转 、 移 动 和 倾斜 当前 的 上 下 文 环境 ， 用 法 如 下 所 示 : 


context.transform(a.b.c.d.e.f): 
参数 说 明 如 下 : 
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So 
a: 水 平 缩放 绘图 。 
b: 水 平 倾斜 绘图 。 
c: 垂直 倾斜 绘图 。 
d: 垂直 缩放 绘图 。 
e: 水 平移 动 绘图 。 
f: 垂直 移动 绘图 。 
次 提示 ， translate(x,y) 可 以 用 下 面 的 方法 来 代替 : | 
| 
contexttransform(0.1.1.0.dx.dy): | 
Eh 
context.transform(1.0,0.1.dx.dy); 


其 中 dx 为 原点 沿 X 轴 移 动 的 数值 ，dy 为 原点 沿 y 轴 移动 的 数值 。 

回 scale(x,y) 可 以 用 下 面 的 方法 来 代替 : 

context.transform(m11,0.0.m22.0.0): 

或 ; 

context.transform(0.m12.m21.0.0.0): 

其 中 dx、dy 都 为 0 表示 坐标 原点 不 变 。 mll、m22 或 ml12、m21 为 沿 x、y 轴 放 大 的 倍数 。 

rotate(angle) 可 以 用 下 面 的 方法 来 代替 : 

context.transform(cos0.sing,- sing. cos8.0,0); 

其 中 的 9 为 旋转 角度 的 弧度 值 ，dx、dy 都 为 0 表示 坐标 原点 不 变 。 
setTransform() 方 法 用 于 将 当前 的 变换 矩阵 进行 重 置 为 最 初 的 矩阵 ， 然 后 以 相同 的 参数 调用 | 

transform 方法 ， 用 法 如 下 所 示 。 

context.setTransform(m11. m12. m21. m22., dx. dy): 


【示例 】 下 面 示例 使 用 setTransform0 方 法 将 前 面 已 经 发 生变 换 的 矩阵 首先 重 置 为 最 初 的 矩阵 ， 
即 恢复 最 初 的 原点 ， 然 后 再 将 坐标 原点 改 为 《10,10)， 并 以 新 的 坐标 为 基准 绘制 一 个 蓝 色 的 矩形 。 


function drawO { 

Var ctx = document.getElementById('canvas').getContext(2d): 

ctx.translate(200.20): 

for (var 二 1:i<90:iHH){ 
ctx.save(); 
ctx.transform(0.95.0.0.0.95.30.30): 
ctx.rotate(Math.PL/12): 
ctx.beginPathO): 
ctx.fillStyle="red": 
ctx.globalAlpha="0.4": 
ctx.arc(0.0.50.0.Math.PI*2.trme): 
ctx.closePathO: 
ctx.fill0: 


} 
ctx.setTransform(1.0.0.1.10.10): 


“ols 


A 


ctx fillStyle="blue"; 
ctx.fillRect(0,0,50.50): 
ctxfill0: 

} 


医 网 在 浏览 器 中 的 预览 效果 如 图 4.38 所 示 。 在 本 例 中 , 使 用 scale(0.95,0.95) 来 缩小 图 形 到 上 次 的 0.95， 
Note | 共 循 环 89 次 ， 同 时 移动 和 旋转 坐标 空间 ， 从 而 实现 图 形 呈 螺旋 状 由 大 到 小 的 变化 。 


oe- -sos | 











图 4.38 和 拢 阵 重 置 并 变换 
4.5 图 形 合成 


本 节 将 介绍 图 形 合成 的 一 般 方法 ， 以 及 路 径 裁 切 的 实现 。 
| 4.5.1 合成 


当 两 个 或 两 个 以 上 的 图 形 存在 重 装 区 域 时 , 默认 情况 下 一 个 图 形 画 在 前 一 个 图 形 之 上 。 通过 指定 
图 形 globalCompositeOperation 属性 的 值 可 以 改变 图 形 的 绘制 顺序 或 绘制 方式 ， 从 而 实现 更 多 种 可 能 。 
【示例 】 下 面 示例 设置 所 有 图 形 的 透明 度 为 1， 即 不 透明 。 设置 globalCompositeOperation 属性 值 
为 source-over， 即 默认 设置 ， 新 的 图 形 会 覆盖 在 原 有 图 形 之 上 ， 也 可 以 指定 其 他 值 ， 详 见 表 4.1。 
function drawO { 
Var ctx = document.getElementById('canvas').getContext('2d"): 
| ctx fillStyle="red": 
| ctx.filIRect(50.25.100.100): 
| ctx.fillStyle="green": 
| ctx.globalCompositeOperation="source-over": 
ctx.beginPathO: 
ctx.arc(150,125.50.0.Math.PI*2.true): 
ctx.closePath():; 
ctx .fil10:; 








} 


| 
| 在 浏览 器 中 的 预览 效果 如 图 4.39 所 示 。 如 果 将 globalAlpha 的 值 更 改 为 0.5Cctx.globalAlpha=0.5: )， 
| 则 两 个 图 形 都 会 呈 半 透明 效果 ， 如 图 4.40 所 示 。 
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图 4.39 图 形 的 组 合 图 4.40 半 透 明 效果 


表 4.1 给 出 了 globalCompositeOperation 属性 所 有 可 用 的 值 。 表 中 的 图 例 和 矩形 表示 为 B， 为 先 绘制 
的 图 形 〈 原 有 内 容 为 destination)， 圆 形 表示 为 A， 为 后 绘制 的 图 形 (新 图 形 为 source)。 在 应 用 时 注 
意 globalCompositeOperation 语句 的 位 置 ， 应 处 在 原 有 内 容 与 新 图 形 之 间 。Chrome 浏览 器 支持 大 多 数 


属性 值 ， 无 效 的 在 表 中 已 经 标 出 。Opera 浏览 器 对 这 些 属性 值 的 支持 相对 来 说 更 好 一 些 。 


属 性 值 


source-over〔 默 认 值 ) 


destination-over 


source-atop 


destination-atop 


表 4.1 globalCompositeOperation 属性 所 有 可 用 的 值 
图 形 合成 示例 说 明 


之 上 


B over A， 即 原 有 内 容 覆 盖 在 新 图 形 之 上 


新 图 形 位 于 原 有 内 容 之 上 


有 内 容 位 于 重合 部 分 之 下 





A overB， 这 是 默认 设置 ， 即 新 图 形 覆 盖 在 原 有 内 容 


只 绘制 原 有 内 容 和 新 图 形 与 原 有 内 容重 又 的 部 分 , 且 


只 绘制 新 图 形 和 新 图 形 与 原 有 内 容重 合 的 部 分 , 且 原 











i 新 图 形 只 出 现在 与 原 有 内 容重 倒 的 部 分 , 其 余 区 域 变 
source-in 
为 透明 
di 原 有 内 容 只 出 现在 与 新 图 形 重合 的 部 分 , 其 余 区 域 为 
lestination-in 
source-out 新 图 形 中 与 原 有 内 容 不 重合 的 部 分 被 保留 
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它 又 J prs aes mi ( 微 课 精 编 版 ) 


续 表 


说 阴 


[3 
应 





原 有 内 容 中 与 新 图 形 不 重叠 的 部 分 被 保留 


全 站 | destination-out 





| lighter 两 图 形 重合 的 部 分 做 加 色 处 理 





darker 两 图 形 重叠 的 部 分 做 减 色 处 理 


只 保留 新 图 形 。 在 Chrome 浏 览 器 中 无 效 ，Opera 11.5 
中 有 效 


将 重 肥 的 部 分 变 为 透明 








4.5.2 ” 裁 切 


使 用 clip0 方 法 能 够 从 原始 画布 中 剪 切 任意 形状 和 尺寸 。 其 原理 与 绘制 普通 canvas 图 形 类 似 ， 只 

| 不 过 elip0 的 作用 是 形成 一 个 蒙 版 ， 没 有 被 蒙 版 的 区 域 会 被 隐藏 。 

容 提示 : 一 旦 前 切 了 某 个 区 域 ， 则 所 有 之 后 的 绘图 都 会 被 限制 在 被 剪 切 的 区 域内 ， 不 能 访问 画布 上 
的 其 他 区 域 。 用 户 也 可 以 在 使 用 clip() 方 法 前 ， 通 过 使 用 save0 方 法 对 当前 画布 区 域 进行 
保存 ， 并 在 以 后 的 任意 时 间 通 过 restore() 方 法 对 其 进行 恢复 。 

【示例 】 如 果 绘 制 一 个 圆 形 ， 并 进行 裁 切 ， 则 圆 形 之 外 的 区 域 将 不 会 绘制 在 canvas 上 。 


function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d): 
// 绘 制 背景 
ctx.fillStyle="black":; 
| ctx.fillRect(0.0.300.300): 
| ctx.fill0:; 
| // 绘 制 圆 形 
| ctx.beginPath(): 
ctx.arc(150.150.100.0.Math.PI*2.true): 
// 裁 切 路 径 
ctx.clipO; 
ctx.translate(200.20): 
for (var =1:1<90:i+){ 
ctx.save(): 
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ctx.globalAlpha="0.4": 
ctx.arc(0.0.50.0.Math.PI*2.tmme): 


ctx.f10: Note 


入 廊 | 

oa | 

ctx.transform(0.95.0.0.0.95.30.30): | 
ctx.rotate(Math.PL/12): | 
ctx.beginPath(); | 
ctx.fillStyle="red": | 





} 
可 以 看 到 只 有 圆 形 区 域内 螺旋 图 形 被 显示 了 出 来 ， 其 余部 分 被 裁 切 掉 了 ， 效 果 如 图 4.41 所 示 。 


/全 -5 
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4.41 裁 切 图 形 


4.6 绘制 文本 


使 用 fillText0 和 strokeText0 方 法 ， 可 以 分 别 以 填充 方式 和 轮廓 方式 绘制 文本 。 
4.6.1 填充 文字 
fillText0 方 法 能 够 在 画布 上 绘制 填 色 文本 ， 默 认 颜 色 是 黑色 。 其 用 法 如 下 。 


context.fillText(text,x.y,max Width): 


参数 说 明 如 下 : 
回 text: 规定 在 画布 上 输出 的 文本 。 
加 ”x: 开始 绘制 文本 的 x 坐标 位 置 ( 相 对 于 画布 )。 
加 ”y: 开始 绘制 文本 的 y 坐标 位 置 ( 相 对 于 画布 )。 
回 ”maxWidth: 可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 。 
【示例 】 下 面 使 用 fillText0 方 法 在 画布 上 绘制 文本 “Hi” 和 “Canvas API”， 效 果 如 图 4.42 所 示 。 
function drawO { 
Var canvas = document.getElementById(canvas'): 
Var Ctx = canvas.getContext('2d"): 
ctx.font="40px Georgia"; 
ctx.fillText("Hi".10.50): 
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ctx.font="50px Verdana": 
// 创 建 渐变 
Var gradient=ctx.createLinearGradient(0.0.canvas.width.0): 
gradient.addColorStop("0"."magenta"): 
全 | | gradient.addColorStop("0.5"."blue"): 
| gradient.addColorStop("1.0","red"): 
/用 渐变 填 色 
GR I ori 
| ctx.fillText("Canvas API".10.120): 


Canvas API 





图 4.42 绘制 填充 文字 
4.6.2 ”轮廓 文字 


使 用 strokeText() 方 法 可 以 在 画布 上 绘制 描 边 文本 ， 默 认 颜色 是 黑色 。 其 用 法 如 下 。 
context.strokeText(text,x,y,max Width); 
参数 说 明 如 下 : 
text: 规定 在 画布 上 输出 的 文本 。 
x: 开始 绘制 文本 的 x 坐标 位 置 〈 相 对 于 画布 ) 。 
y: 开始 绘制 文本 的 y 坐标 位 置 〈 相 对 于 画布 ) 。 
maxWidth: 可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 。 
【 示例】 下面 使 用 strokeText0 方 法 绘制 文本 “Hi” 和 “Canvas API”， 效 果 如 图 4.43 所 示 。 
function drawO { 
Var canvas = document.getElementById(canvas ): 
Var Ctx = canVas.getContext(2d): 
ctx.font="40px Georgia"; 
ctx.fillText("Hi".10.50): 
ctx.font="50px Verdana": 
| // 创 建 渐变 
| Var gradient=ctx.createLinearGradient(0.0.canvas.width.0): 
| gradient.addColorStop("0"."magenta"): 
| gradient.addColorStop("0.5"."blue"): 
gradient.addColorStop("1.0"."red"): 
| // 用 渐变 填 色 
| ctx.strokeStyle=gradient: 
| ctx.strokeText("Canvas API".10.120): 
| 
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加 而 5 = cs 





图 4.43 ”绘制 轮廓 文字 





4.6.3 文本 样式 
F 面 简单 介绍 文本 样式 的 相关 属性 。 


font: 定义 字体 样式 ， 语 法 与 CSS 字体 样式 相同 。 默 认 字 体 样式 为 10px sans-serif。 
textAlign: 设置 正在 绘制 的 文本 水 平 对 齐 方式 。 取 值 说 明 如 下 : 

start: 默认 ， 文 本 在 指定 的 位 置 开始 。 

end: 文本 在 指定 的 位 置 结束 。 

center: 文本 的 中 心 被 放置 在 指定 的 位 置 。 

left: 文本 左 对 齐 。 

right: 文本 右 对 齐 。 

textBaseline: 设置 正在 绘制 的 文本 基线 对 齐 方式 ， 即 文本 垂直 对 齐 方式 。 取 值 说 明 如 下 : 
alphabetic: 默认 值 ， 文 本 基线 是 普通 的 字母 基线 。 

top: 文本 基线 是 em 方 框 的 顶端 。 

hanging: 文本 基线 是 悬挂 基线 。 

middle: 文本 基线 是 em 方 框 的 正中 。 

ideographic: 文本 基线 是 表意 基线 。 

bottom: 文本 基线 是 em 方 框 的 底 端 。 


净 提示 大 部 分 浏览 器 沿 不 支持 hanging 和 ideographie 属性 值 。 


direction: 设置 文本 方向 。 取 值 说 明 如 下 : 
> ltr: 从 左 到 右 。 
> 让: 从 右 到 左 。 
> inherit， 默 认 值 ， 继 承 文本 方向 。 
【示例 1】 下 面 示例 在 x 轴 150px 的 位 置 创建 一 条 竖 线 。 位 置 150 就 被 定义 为 所 有 文本 的 锚 点 。 
然后 比较 每 种 textAlign 属性 值 对 齐 效果 ， 如 图 4.44 所 示 。 
function drawO { 
Var ctx = document.getElementById(canvas').getContext(2d): 
// 在 位 置 150 创建 一 条 竖 线 
ctx.strokeStyle="blue": 
ctx.moveTo(150.20): 
ctx.lineTo(150.170): 
ctx.strokeO; 
ctx.font="15px Arial": 
// 显 示 不 同 的 textAlign 值 


加 
Vvvvyv 


Vvvyvyvyv 
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ctx.textAlign="start": 
ctx.fillText("textAlign=start".150.60): 
ctx.textAlign="end"; 
ctx.fillText("textAlign=end".150.80): 


| ctx.fillText("textAlign=left".150.100): 


ctx.textAlign="center"; 
eC eA eenter S020 
| ctx.textAlign="right"; 
ctx.fillText("textAlign=right".150.140): 


【示例 2】 下 面 示例 在 y 轴 100px 的 位 置 创建 一 条 水 平 线 。 位 置 100 就 被 定义 为 用 蓝 色 填充 的 
矩形 。 然 后 比较 每 种 textBaseline 属性 值 对 齐 效果 ， 如 图 4.45 所 示 。 


function drawO { 
Var ctx = document.getElementById('canvas').getContext('2d"); 
// 在 位 置 y=100 绘制 蓝 色 线条 
ctx.strokeStyle="blue"; 
ctx.moveTo(5.100); 
ctx.lineTo(395.100): 
ctx.strokeO: 
ctx.font="20px Arial" 
/在 y=100 以 不 同 的 textBaseline 值 放置 每 个 单词 
ctx.textBaseline="top"; 
ctx.fillText("Top",5,100): 
ctx.textBaseline="bottom'": 
ctx.fillText("Bottom",50,100); 
ctx.textBaseline="middle"; 
ctx.fillText("Middle".120,100): 
ctx.textBaseline="alphabetic"; 
ctx.fillText("Alphabetic".190.100): 
ctx.textBaseline="hanging": 
ctx.fillText("Hanging".290.100): 


BO © Senora - Sc |B oore BB © Br//ocalho.. - Ro | ecconon 


Ee 
textnign=end 

hextAlign=left 

textAigj=center Hanging 








4.44 ”比较 每 种 textAlign 属性 值 对 齐 效果 4.45 ”比较 每 种 textBaseline 属性 值 对 齐 效果 
4.6.4 测量 宽度 
视频 讲解 | 使 用 measureText0 方 法 可 以 测量 当前 所 绘制 文字 中 指定 文字 的 宽度 ， 它 返回 一 个 TextMetrics 对 
| 








| 象 ， 使 用 该 对 象 的 width 属性 可 以 得 到 指定 文字 参数 后 所 绘制 文字 的 总 宽度 ， 其 用 法 如 下 。 
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metrics=context. measureText(text):; | 
其 中 的 参数 text 为 要 绘制 的 文字 。 | 
| 


褒 提示 : 如 果 需 要 在 文本 向 画布 答 出 之 前 就 了 解 文本 的 宽度 ， 应 该 使 用 该 方法 . | 
【示例 】 下 面 是 测量 文字 宽度 的 一 个 示例 ， 预 览 效果 如 图 4.46 所 示 。 | 





function drawO { ! 
Var ctx = document.getElementById('canvas').getContext(2d): | 
ctx.font = "bold 20px 楷体 "; | 
ctx.fillStyle="Blue"; 
Var txtl = "HIMLS+CSS3"; 
ctx.fillText(txt1,10,40); 
var txt2 = "以 上 字符 串 的 宽度 为 :"; 
Var mtxtl = ctx.measureText(txt]); 
Var mtxt2 = ctx.measureText(txt2); 
ctx.font = "bold 15px 宋体 ": 
ctx.fillStyle="Red": 
ctx.fillText(txt2,10,80): 
ctx.fillText(mtxt] .width.mtxt2.width,80): 


| © S moocaho-. - scj ec 


HTMLS+CSS3 
以 上 字符 中 的 突 度 为 : 104 





图 4.46 测量 文字 宽度 





4.7 使 用 图 像 


在 canvas 中 可 以 导入 图 像 。 导 入 的 图 像 可 以 改变 大 小 、 裁 切 或 侣 成。canvas 支持 多 种 图 像 格式 ，| 
如 PNG、GIF、JPEG 等 。 


4.7.1 导入 图 像 


在 canvas 中 导入 图 像 的 步骤 : 

第 1 步 ， 确 定 图 像 来 源 。 | 

第 2 步 ， 使 用 drawImage0 方 法 将 图 像 绘制 到 canvas 中 。 

确定 图 像 来 源 有 4 种 方式 ， 用 户 任 选 一 种 即 可 。 

页 面 内 的 图 片 : 如 果 已 知 图 片 元 素 的 ID ， 则 可 以 通过 documentimages 集合 、 
document.getElementsByTagName() 或 document. getElementById0O) 等 方法 获取 页 面 内 的 该 图 | 
片 元 素 。 
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其 他 canvas 元 素 : 可 以 通过 document.getElementsByTagName() 或 document.getElementById0 
等 方法 获取 已 经 设计 好 的 canvas 元 素 。 例 如 ， 可 以 用 这 种 方法 为 一 个 比较 大 的 canvas 生成 
缩 略图 。 
用 脚本 创建 一 个 新 的 image 对 象 : 使 用 脚本 可 以 从 零 开始 创建 一 个 新 的 image 对 象 。 
不 过 这 种 方法 存在 一 个 缺点 : 如 果 图 像 文 件 来 源 于 网 络 且 较 大 ， 则 会 花费 较 长 的 时 间 来 装 
载 。 所 以 如 果 不 希 望 因为 图 像 文 件 装载 而 导致 漫长 的 等 待 ， 需 要 做 好 预 装载 的 工作 。 
使 用 data:url 方式 引用 图 像 : 这 种 方法 允许 用 Base64 编码 的 字符 串 来 定义 一 个 图 片 ， 优 点 
是 图 片 可 以 即时 使 用 ， 不 必 等 待 装载 ， 而 且 迁 移 也 非常 容易 。 缺 点 是 无 法 缓存 图 像 ， 所 以 
如 果 图 片 较 大 ， 则 不 太 适 宣 用 这 种 方法 ， 因 为 这 会 导致 代入 的 url 数据 相当 庞大 。 
使 用 脚本 创建 新 image 对 象 时 ， 其 方法 如 下 所 示 。 
varimg =new Image0: ”// 创 建新 的 Image 对 象 
img.src='imagel.png':; /设置 图 像 路 径 
如 果 要 解决 图 片 预 装载 的 问题 ， 则 可 以 使 用 下 面 的 方法 ， 即 使 用 onload 事件 一 边 装载 图 像 一 边 
执行 绘制 图 像 的 函数 。 
var img 二 new Image0:; ”// 创 建新 的 Image 对 象 
img.onload = functionO{ 
// 此 处 放置 drawImage 的 语句 
ee /设置 图 像 路 径 
不 管 采用 什么 方式 获取 图 像 来 源 ,之 后 的 工作 都 是 使 用 drawImage0 方 法 将 图 像 绘 制 到 canvas 中 。 
drawImage() 方 法 能 够 在 画布 上 绘制 图 像 、 画 布 或 视频 。 该 方法 也 能 够 绘制 图 像 的 某 些 部 分 ， 以 及 增 
| 加 或 减少 图 像 的 尺 寸 。 其 用 法 如 下 所 示 。 
/语法 1: 在 画布 上 定位 图 像 
context.drawImage(img.x.y): 
// 语 法 2: 在 画布 上 定位 图 像 ， 并 规定 图 像 的 宽度 和 高 度 
context.drawImage(img.x.yY.width.heighb: 
/语法 3: 剪 切 图 像 ， 并 在 画布 上 定位 被 前 切 的 部 分 
context.drawImage(img.sx.SyY.swWidth.sheight.x.Ywidth.heighb: 
参数 说 明 如 下 : 
img: 规定 要 使 用 的 图 像 、 画 布 或 视频 。 
sx: 可 选 。 开 始 剪 切 的 x 坐标 位 置 。 
sy: 可 选 。 开 始 剪 切 的 y 坐标 位 置 。 
swidth: 可 选 。 被 前 切 图 像 的 宽度 。 
sheight: 可 选 。 被 剪 切 图 像 的 高 度 。 
x: 在 画布 上 放置 图 像 的 x 坐标 位 置 。 
y: 在 画布 上 放置 图 像 的 y 坐标 位 置 。 
width: 可 选 。 要 使 用 的 图 像 的 宽度 。 可 以 实现 伸展 或 缩小 图 像 。 
height: 可 选 。 要 使 用 的 图 像 的 高 度 。 可 以 实现 伸展 或 缩小 图 像 。 
【示例 】 下 面 示例 演示 了 如 何 使 用 上 述 步 骤 将 图 像 引入 canvas 中 ， 预 览 效 果 如 图 4.47 所 示 。 至 
| 于 第 二 和 第 三 种 drawImage0 方 法 ， 我 们 将 在 后 续 小 节 中 单独 介绍 。 


function drawO { 


回 
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Var ctx = documentgetElementById(Ccanvas').getContext(2d): | 
Var img = new ImageO: 
img.onload = functionO{ 
ctx.drawImage(img.0.0): 
} 
img.src = "images/1.jpg: 





4.47 向 canvas 中 导入 图 像 


4.7.2 缩放 图 像 


drawImage() 方 法 的 第 二 种 用 法 可 以 用 于 使 图 片 按 指 定 的 大 小 显示 ， 其 用 法 如 下 。 
context.drawImage(image, x. y, width, height); | 


其 中 width 和 height 分 别 是 图 像 在 canvas 中 显示 的 宽度 和 高 度 。 | 
【示例 】 下 面 示例 将 4.7.1 节 示例 中 的 代码 稍 作 修改 ， 设 置 导入 的 图 像 放大 显示 ， 并 仅 显示 头 部 | 
位 置 ， 效 果 如 图 4.48 所 示 。 
function drawO { 
Var ctx = document.getElementById(canvas').getContext(2d): 
var img = new Image(); 
img.onload = functionO{ 
ctx.drawImage(img,-100.-40.800.500): 
} 
img.src = images/1.jpg: 











图 4.48 放大 图 像 显示 
4.7.3 裁 切 图 像 
drawImage 的 第 三 种 用 法 用 于 创建 图 像 切片 ， 其 用 法 如 下 。 
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context.drawImage(image.sx.sy.sw.sh.dx.dy.dw.dh): 


其 中 image 参数 与 前 两 种 用 法 相同 ， 其 余 8 个 参数 可 以 参考 下 面 的 图 示 。sx、sy 为 源 图 像 被 切割 
区 域 的 起 始 坐 标 ，sw、sh 为 源 图 像 被 切 下 来 的 宽度 和 高 度 ，dx、dy 为 被 切割 下 来 的 源 图 像 要 放置 





| 到 目标 canvas 的 起 始 坐 标 ，dw、dh 为 被 切割 下 来 的 源 图 像 放置 到 目标 canvas 的 显示 宽度 和 高 度 ， 
| 如 图 4.49 所 示 。 


目标 Canvas 
5 





图 4.49 其 余 8 个 参数 的 图 示 
【示例 】 下 面 示例 演示 如 何 创建 图 像 切 片 ， 预 览 效果 如 图 4.50 所 示 。 


function drawO { 
Var ctx = document.getElementById('canvas').getContext('2d"): 
var img = new Image(); 
img.onload = functionO{ 
ctx.drawImage(img,70.50.100.70.5.5.290.190): 
} 
img.src = ‘images/1.jpg'; 





4.50 创建 图 像 切片 


4.7.4 平 铺 图 像 


图 像 平 铺 就 是 让 图 像 填 满 画布 ， 有 两 种 方法 可 以 实现 ， 下 面 结合 示例 进行 说 明 。 
【示例 1】 第 一 种 方法 是 使 用 drawImage0 方 法 。 
function drawO { 
Var Canvas = document.getElementById('canvas'): 
Var Ctx = canvas.getContext(2d"): 
Var image = new Image(): 
image.src = "images/l .pne"; 
image.onload = functionO{ 
Var scale=5 // 平 铺 比 例 
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varnl=image.width/scale: // 缩 小 后 图 像 宽度 
var n2=image.height/scale: // 缩 小 后 图 像 高 度 
var n3=canvas.width/n1; // 平 铺 横向 个 数 
var n4=canvas.height/n2: // 平 铺 纵向 个 数 
for(var i=0:i<n3;i+) 
for(var j=0j<n4:j++) 
ctx.drawImage(image,i*n1.j*n2.n1.02): 





上 
} 
本 例 用 到 几 个 变量 以 及 循环 语句 ， 相 对 来 说 处 理 方法 复杂 一 些 ， 预 览 效果 如 图 4.51 所 示 。 
【示例 2】 使 用 createPatterm0 方 法 ， 该 方法 只 使 用 了 几 个 参数 就 达到 了 上 面 所 述 的 平 铺 效果 。 

createPattem() 方 法 的 用 法 如 下 所 示 : 

context.createPattern(image,type); 

参数 image 为 要 平 铺 的 图 像 ， 参 数 type 必须 是 下 面 的 字符 串 值 之 一 : 

no-repeat: 不 平 铺 。 

Tepeat-x: 横 方 向 平 铺 。 

repeat-y: 纵 方向 平 铺 。 

repeat: 全 方向 平 铺 。 

创建 image 对象 ， 指 定 图 像 文件 后 ， 使 用 createPattern0 方 法 创建 填充 样式 , 然后 将 该 样式 指定 给 
图 形 上 下 文 对 象 的 fillStyle 属性 ， 最 后 填充 画布 ， 重 复 填充 的 效果 如 图 4.52 所 示 。 


image.onload = functionO { 
var ptm = ctx.createPattern(image,'repeat’): // 创 建 填充 样式 ， 全 方向 平 铺 
ctx.fillStyle = ptm:; // 指 定 填充 样式 
ctx.fIRect(0.0.300.200): /填充 画布 
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图 4.51 通过 drawImage() 方 法 平 铺 显示 图 4.52 ”通过 createPattem( 方 法 平 铺 显示 
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| 4.8 像素 操作 
全 击 | 


| 到 目前 为 止 ， 我 们 尚未 深入 了 解 canvas 画布 真实 像素 的 原理 ， 事 实 上 ， 用 户 可 以 直接 通过 
ImageData 对 象 操纵 像素 数据 ， 直 接 读 取 或 将 数据 数组 写 入 该 对 象 中 。 


| 4.8.1 认识 ImageData 对 象 


ImageData 对 象 表示 图 像 数 据 ， 存 储 canvas 对 象 真实 的 像素 数据 ， 它 包含 以 下 几 个 只 读 属性 : 

加 ”width: 返回 ImageData 对 象 的 宽度 ， 单 位 是 像素 。 

height: 返回 ImageData 对 象 的 高 度 ， 单 位 是 像素 。 

data: 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数据 。 

图 像 数 据 是 一 个 数组 ， 包 含 着 RGBA 格式 的 整 型 数据 ， 范 围 在 0 至 255 之 间 (包括 255)， 通 过 
图 像 数 据 可 以 查看 画布 初始 像素 数据 。 每 个 像素 用 4 个 值 来 代表 ， 分 别 是 红 、 绿 、 蓝 和 透明 值 。 对 于 

透明 值 来 说 ，0 是 透明 的 ，255 是 完全 可 见 的。 数组 格式 如 下 : 
[rl, g1, bl, al,T2. g2, b2, a2.13, g3, b3. a3,...] 


gl1、bl 和 al 分 别 为 第 一 个 像素 的 红色 值 、 绿 色 值 、 蓝 色 值 和 透明 度 值 。r2、g2、b2、a2 分 
| 别 为 第 一 个 像素 的 红色 值 、 绿色 值 、 蓝 色 值 、 透 明度 值 ， 依 此 类 推 。 像素 是 从 左 到 右 ， 然 后 自 上 而 下 ， 
| 使 用 data.length 可 以 遍历 整个 数组 。 
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8.2 创建 图 像 数 据 


使 用 createImageData0 方 法 可 以 创建 一 个 新 的 、 空 白 的 ImageData 对 象 ， 具 体 用 法 如 下 所 示 。 


/以 指定 的 尺寸 以 像素 计 ) 创建 新 的 ImageData 对 象 
Var imgData=context.createImageData(width.height): 

/创建 与 指定 的 另 一 个 ImageData 对 象 尺寸 相同 的 新 ImageData 对 象 ( 不 会 复制 图 像 数 据 ) 
var imgData=context.createImageData(imageData): 

参数 简单 说 明 如 下 : 

width: 定义 ImageData 对 象 的 宽度 ， 以 像素 计 。 

height: 定义 ImageData 对 象 的 高 度 ， 以 像素 计 。 

imageData: 指定 另 一 个 InageData 对 象 。 

调用 该 方法 将 创建 一 个 指定 大 小 的 ImageData 对 象 ， 所 有 像素 被 预 设 为 透明 黑 。 


4.8.3 将 图 像 数据 写 入 画布 


putImageData() 方 法 可 以 将 图 像 数 据 从 指定 的 ImageData 对 象 写 入 画布 。 具 体 用 法 如 下 。 
contextputImageData(imgDatax.ydirtyXdirtyYdirtyWidth.dirtyHeighb: 

参数 简单 说 明 如 下 : 

回 imgData: 要 写 入 画布 的 InageData 对 象 。 

x: ImageData 对 象 左上 角 的 x 坐标 ， 以 像素 计 。 

加 y: ImageData 对 象 左 上 角 的 y 坐标 ， 以 像素 计 。 
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dirtyX: 可 选 参数 ， 在 画布 上 放置 图 像 的 x 轴 位 置 ， 以 像素 计 。 
dirtyY: 可 选 参数 ， 在 画布 上 放置 图 像 的 y 轴 位 置 ， 以 像素 计 。 
dirtyWidth: 可 选 参 数 ， 在 画布 上 绘制 图 像 所 使 用 的 宽度 。 
dirtyHeight: 可 选 参数 ， 在 画布 上 绘制 图 像 所 使 用 的 高 度 。 
【示例 】 下 面 示例 创建 一 个 100X100 像素 的 ImageData 对 象 ， 其 中 每 个 像素 都 是 红色 的 ， 然 后 | 
把 它 写 入 画布 中 显示 出 来 。 
<canvas id="myCanvas"></canvas> 
<script> 
Var c=document.getElementById("myCanvas"): 
Var Ctx=c.getContext("2d"); 
varimgData=ctx.createImageData(100.100): // 创 建 图 像 数据 
/使 用 for 循环 语句 ， 逐 一 设置 图 像 数据 中 每 个 像素 的 颜色 值 
for (var i=0;i<imgData.data.length:i+=4){ 





图 回回 网 





imgData.data[i+0]=255; 

imgData.data[i+1]=0: 

imgData.data[i+2]=0: 

imgData.data[i+3]=255; 
} 
ctx.putImageData(imgData,10,10): // 把 图 像 数据 写 入 画布 
</script> 


4.8.4 在 画布 中 复制 图 像 数 据 


getImageData() 方 法 能 复制 画布 指定 矩形 的 像素 数据 ， 返 回 ImageData 对 象 ， 用 法 如 下 所 示 。 
var imgData=context.getImageData(x.y.width.height): 


参数 简单 说 明 如 下 : 

x: 开始 复制 的 左上 角 位 置 的 x 坐标 。 

y: 开始 复制 的 左上 角 位 置 的 y 坐标 。 

width: 将 要 复制 的 矩形 区 域 的 宽度 。 

height: 将 要 复制 的 矩形 区 域 的 高 度 。 

【示例 】 下 面 示例 先 创 建 一 个 图 像 对 象 ， 使 用 sre 属性 加 载 外 部 图 像 源 ， 加 载 成 功 之 后 ， 使 用 
drawImage0 方 法 把 外 部 图 像 绘制 到 画布 上 。 然 后 使 用 getImageData0 方 法 把 画布 中 的 图 像 转换 为 | 
ImageData (图像 数据 ) 对 象 。 然后， 使 用 for 语句 逐一 访问 每 个 像素 点 ， 对 每 个 像素 的 颜色 进行 反 显 
操作 ， 再 存 回 数组 。 最 后 ， 使 用 putImageData0 方 法 将 反 显 操作 后 的 图 像 重 绘 在 画布 上 。 

<canvas id="myCanvas" width="384" height="240"></canvas> 
<script> 

Var Canvas = document.getElementById("myCanvas"): 

Var context = canvas.getContext(2d"):; 




















3 
| 
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image.onload = function O{ 
context.drawImage(image,. 0. 0): 
var imagedata = context.getImageData(0.0.image.width.image.height): 
for (vari= 0, n= imagedata.data.length: i <n:i+=4){ 
imagedata.data[i+0] = 255 - imagedata.data[i+0]: // red 
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imagedata.data[i+1] = 255 - imagedata.data[i+2]: // green 
imagedata.data[i+2] = 255 - imagedata.data[i+1]; // blue 


} 

context.putImageData(imagedata. 0. 0); 
$$ 
</script> 


以 上 代码 在 正 浏览 器 中 的 预览 效果 如 图 4.53 所 示 。 





(b) 反 转 效果 图 


图 4.53 图 像 反 色 显 示 


| 4.8.5 保存 图 片 


HTMLCanvasElement 提供 一 个 toDataURL0O 方 法 , 使 用 它 可 以 将 画布 保存 为 图 片 ， 返 回 一 个 包含 
| 图 片 展示 的 data URI。 上 有 具体 用 法 如 下 : 


canvas.toDataURL(type., encoderOptions): 

参数 简单 说 明 如 下 : 

type: 可 选 参 数 ， 默 认为 image/png。 

encoderOptions: 可 选 参数 ， 默 认为 0.92。 在 指定 图 片 格式 为 image/ipeg 或 image/webp 的 情 
况 下 ， 可 以 设置 图 片 的 质量 ， 取 值 从 0 到 1 的 区 间 内 选择 ， 如 果 超 出 取 值 范围 ， 将 会 使 用 
默认 值 。 

| 容 提示 : 所 谓 data URI， 是 指 目前 大 多 数 浏览 器 能 够 识别 的 一 种 base64 位 编码 的 URI， 主 要 用 于 

| 小 型 的 、 可 以 在 网 页 中 直接 嵌入 ， 而 不 需要 从 外 部 文件 嵌入 的 数据 ， 如 img 元 素 中 的 图 

像 文 件 等 ， 类 似 于 “data:image/png; base64, iVBORWOKGgoAAAANSUhEUgAAAA 

oAAAAK...etc”。 目前， 大 多 数 现代 浏览 器 都 支持 该 功能 。 





| 使 用 toBlob0 方 法 ， 可 以 把 画布 存储 到 Blob 对 象 中 ， 用 以 展示 canvas 上 的 图 片 ， 这 个 图 片 文件 
| 可 以 被 缓存 或 保存 到 本 地 。 具 体 用 法 如 下 : 

| 
| 


Void canvas.toBlob(callback. type. encoderOptions): 


参数 callback 表示 回调 函数 ， 当 存储 成 功 时 调用 ， 可 获得 一 个 单独 的 Blob 对 象 参数 。type 和 
encoderOptions 参数 与 ttDataURIL() 方 法 相同 。 
【示例 1】 下 面 示例 将 绘图 输出 到 data URL， 效 果 如 图 4.54 所 示 。 
<canvas id="myCanvas" width="400" height="200"></canvas> 
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p | 
<script type="text/javascript"> | 
Var Canvas = document.getElementById("myCanvas"): | 
Var context = canVas.getContext(2d): | 
context.fillStyle = "rgb(0. 0. 255)": | 
context.fillRect(0, 0. canvas.width. canvas.height): | 
context fillStyle = "rgb(255. 255. 0)" We 
context.fillRect(10, 20. 50, 50): 
window.location =canvas.toDataURL("image/ipeg"):; 


</script> 














图 4.54 把 图 形 输出 到 data URL 

【示例 2】 下 面 示例 在 页 面 中 添加 一 块 画布 、 两 个 按钮 ， 画 布 中 显示 绘制 的 几何 图 形 ， 单 击 “ 保 
存 图 像 ” 按 钮 ， 可 以 把 绘制 的 图 形 另 存 到 另 一 个 页 面 中 ， 单 击 “ 下 载 图 像 ” 按 钮 ， 可 以 把 绘制 的 图 形 
下 载 到 本 地 ， 演 示 效 果 如 图 4.55 所 示 。 

具体 代码 解析 请 扫 码 学 习 。 
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图 4.55 保存 和 下 载 图 形 
4.9 Path2D 对 象 


HTML Canvas 2D API 新 增 了 一 些 新 的 功能 。 目 前 ，Chrome 37+、Firefox 31+、Opera 23+、Safari 
7+ 版 本 浏览 器 支持 或 部 分 支持 以 Path2D 对 象 为 核心 的 新 功能 。 


4.9.1 Canvas 2D API 新 功能 





在 MDN 上 ， Canvas 2D API 文档 已 经 进行 了 大 部 分 更 新 ,以 反映 当前 canvas 标准 和 浏览 器 的 执 | 视频 讲解 
行 状态 。 新 增 功能 简单 描述 如 下 : 


| 
| 
| 
k 
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1. 新 增 Path2D 对 象 


新 的 Path2D API 从 Firefox 31+ 开 始 支持 ， 人 允许 用 户 存储 路 径 ， 简 化 了 canvas 绘制 代码 ， 并 提升 
| 了 运行 速度 。 用 户 可 以 通过 三 种 方式 创建 一 个 Path2D 对 象 。 
全 | aewPataD0: // 空 的 path 对 象 
| new Path2D(path); /复制 path 对 象 
new Path2D(d): /通过 SVG path 字符 串 创建 nath 对 象 


| 第 三 种 方式 使 用 了 SVG 路 径 数据 来 构建 ， 非 常 好 用 。 用 户 现在 也 可 以 重复 使 用 自己 的 SVG 路 径 
| 在 canvas 中 直接 来 绘制 同样 的 形状 。 例 如 : 
varp =new Path2D("M10 10h 80v80h -80 2"): 


在 构建 一 个 空 的 路 径 对 象 时 ， 用 户 可 以 在 CanvasRenderingContext2D 环境 中 直接 使 用 自己 熟悉 
的 常用 的 路 径 方法 。 例 如 : 
/创建 一 个 圆 
Var circle = new Path2D0: 
circle.arc(50, 50. 50.0.2* Math.PD): 
/在 context 上 下 文 对 象 ctx 中 描绘 边框 
ctx.stroke(circle): 


在 canvas 实际 绘制 路 径 时 ， 提 供 一 个 可 选 的 Path2D 路 径 : 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| ctx.fill(path) 
| ctx.stroke(path) 
| ctx.clip(path) 
| 

| 

| 

| 

| 

| 

| 

| 


ctx isPointInPath(path) 
ctx.isPointInStroke(path) 











区 域 

从 Firefox 32 开始 ， 对 点 击 区 域 (hit regions) 的 实验 性 支持 被 添加 进来 。 用 户 需 要 设置 
canvas hitregions.enabled=true 来 进行 测试 。 

点 击 区 域 提供 了 一 个 更 方便 的 方法 来 探测 鼠标 是 否 在 一 个 特定 区 域 。 不 再 手动 检查 坐标 , 这 对 复 
杂 的 形状 来 说 非常 困难 。 定 义 点 击 区 域 方法 如 下 : 

CanvasRenderingContext2D.addHitRegion() // 在 canvas 中 添加 一 个 点 击 区 域 


CanvasRenderingContext2D removeHitRegion0 ”// 从 canvas 中 移 除 带 有 id 的 点 击 区 域 
CanvasRenderingContext2D.clearHitRegions0 ””// 从 canvas 中 移 除 所 有 的 点 击 区 域 








| addHitRegion0 方 法 可 以 在 一 个 现 有 的 路 径 或 是 一 个 Path2D 路 径 中 添加 一 个 点 击 区 域 。 
| MouseEvent 接口 有 一 个 扩展 的 region 属性 ， 用 户 可 以 用 其 来 检查 鼠标 是 否 点 击 了 区 域 。 








| 

| 3. 焦点 环 

| 在 Firefox 32 中 ，drawFocusIfNeeded(element) 可 以 无 须 属性 切换 自动 支持 。 如 果 在 <canvas> 元 素 
| 中 提供 的 加 














如 果 回 退 元 素 获得 焦点 〈 如 切换 到 一 个 包含 canvas 的 页 面 )， 该 元 素 在 canvas 中 的 像素 表示 / 形 
状 可 以 绘制 一 个 焦点 环 来 表示 当前 的 焦点 。 


4. CSS/SVG 过 滤器 可 用 于 canvas 
Firefox 35 开始 支持 canvas 泻 染 内 容 的 过 滤器 。 语 法 和 CSS 过 滤器 属性 相同 。 
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5. 其 他 


alpha 属性 在 Firefox 30 中 可 用 。 

可 以 在 样式 中 添加 transformations，Firefox 33+ 支 持 。 

新 增 ctx.resetTransform( 方法 来 重 置 变型 ，Firefox 36+ 支 持 。 

最 新 的 canvas 规范 包含 了 一 些 全 新 的 API， 以 及 在 不 同 浏览 器 中 的 执行 情况 。 


4.9.2 使 用 Path2D 对 象 
使 用 Path2D 对 象 的 各 种 方法 可 以 绘制 直线 、 和 矩形 、 圆 形 、 椭 圆 以 及 曲线 ， 具 体 说 明 如 表 4.2 所 
示 。 这 些 方 法 中 的 各 种 参数 的 用 法 与 图 形 上 下 文 对 象 的 同名 方法 用 法 相同 。 
表 4.2 Path2D 对 象 方法 
方 法 说 了 明 
path.moveTo(x.y) 将 光标 移动 到 指定 坐标 点 
在 当前 坐标 点 与 参数 中 指定 的 直线 终点 








人 之 间 绘制 一 条 直线 | 
path.rect(x, y, width, height) 绘制 矩形 | 
path.arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制 圆 形 或 圆 弧 | 
| Y radiusX, radiusY, rotation，startAngle，endAngle、 绘制 椭圆 或 椭圆 形 贺 弧 
path.arcTo(x1, y1. x2. y2, radius): 绘制 圆 形 曲线 或 圆 弧 曲 线 | 
path.bezierCurveTo(cplx. cply. cp2x. cp2y. x. y): 绘制 贝 塞 尔 曲线 | 
path.quadraticCurveTo(cpx, cpy. x, y): 绘制 二 次 样 条 曲线 | 
path.closePath| 关闭 路 径 


可 以 使 用 图 形 上 下 文 对 象 的 fil10 方 法 填充 使 用 Path2D 对 象 绘制 的 路 径 所 形成 的 图 形 ， 或 者 使 用 
图 形 上 下 文 对 象 的 stroke0 方 法 绘制 使 用 Path2D 对 象 绘制 的 路 径 所 形成 的 图 形 轮廓 ， 代 码 如 下 所 示 : 


context.fill (path): 
context.stroke(path): 


【示例 1】 下 面 示例 使 用 path.are0 方 法 在 画布 上 绘制 多 个 圆 形 。 在 浏览 器 中 的 预览 效果 如 图 4.56 


所 示 
<canvas id="myCanvas" width="600" height="400"></canvas> 
‘<script type="text/javascript"> 
Var canvas = document.getElementById("myCanvas"): 

Var context = canvas.getContext('2d"): 
context.fillStyle = "#EEEEFF": 
context.fillRect(0. 0. 600. 400): 
varn=0; 
for(vari= 0;i< 10: itHH{ 
Var path=new Path2DO: 
path.arc(i * 25, i* 25. i * 10. 0. Math PI* 2. true): 
path.closePathO: 
context.fillStyle = 'Tgba(255. 0. 0. 0.25) 
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context.fill(path): 
} 
</script> 
全 办 可 以 在 Path2D 对 象 的 构造 函数 中 使 用 一 个 参数 ,参数 值 为 另外 一 个 Path2D 对 象 , 这 将 该 对 象 所 


代表 的 路 径 复制 给 新 创建 的 Path2D 对 象 。 








图 4.56 重复 绘制 圆 形 


| 【示例 2】 下 面 示例 首先 创建 一 个 Path2D 对 象 ， 并 使 用 该 对 象 绘制 一 个 矩形 路 径 。 然 后 ， 创 建 
第 二 个 Path2D 对 象 ， 并 将 第 一 个 Path2D 对 象 所 代表 的 路 径 复制 给 第 二 个 Path2D 对 象 。 最 后 ， 再 次 
使 用 第 二 个 Path2D 对 象 绘制 一 个 圆 形 路 径 ， 使 用 图 形 上 下 文 对 象 的 stroke0 方 法 在 画布 中 绘制 第 二 个 
Path2D 对 象 所 形成 的 图 形 。 在 浏览 器 中 的 预览 效果 如 图 4.57 所 示 。 


Path2.arc(170.60.50.0.2*Math.PD: 
context.stroke(path2): 
</scrip> 





| 
| 
| C [®tocahosies2mm 女 | 
| 

















图 4.57 复制 绘制 的 圆 形 


| 

| 

| 

| 可 以 使 用 Path2D 对 象 的 addPath0 方 法 将 一 个 Path2D 对 象 所 代表 的 路 径 添加 到 另 一 个 Path2D 对 
J 象 所 代表 的 路 径 中 ， 方 法 如 下 所 示 : 
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Path2 addpath(pathD): | 

在 上 面 语法 中 , path2 与 path 1 均 代表 一 个 Path2D 对 象 ， 该 行 代码 表示 将 path 1 对 象 所 代表 的 路 | 
径 添 加 到 path2 对 象 所 代表 的 路 径 中 。 | 

【示例 3】 下 面 示例 修改 示例 2 中 的 代码 ， 如 下 所 示 。 在 浏览 器 中 访问 页 面 ， 显 示 效 果 如 图 4.58 | 

所 示 。 

<canvas id="myCanvas" width="300" height="200"></canvas> 

‘<script type="text/javascript"> | 

Var canvas = document.getElementById("myCanvas"); 

Var context = canvas.getContext('2d"): 

var pathl=new Path2D(0: 

pathlrect(10.10.100.100); 

Var path2=new Path2D(): 

path2.moveTo(220.60): 

path2.arc(170,60.50.0.2*Math.PD: 

path2.addPath(path1); 

context.stroke(path2): 

</scrip> 

可 以 在 Path2D 对 象 的 构造 函数 中 使 用 一 个 代表 了 SVG 路 径 的 字符 串 ， 这 表示 使 用 该 Path2D 对 
象 绘制 该 路 径 。 

【示例 4】 下 面 示例 首先 将 绘制 起 点 设置 在 (10, 10) 处， 然后 横向 绘制 80 个 像素 ,纵向 绘制 80 

个 像素 ， 接 着 横向 反 向 绘制 80 个 像素 ， 最 后 绘制 到 起 点 处 。 在 浏览 器 中 的 预览 效果 如 图 4.59 所 示 。 

<canvas id="myCanvas" width="200" height="200"></canvas> 

<script type="text/javascript"> 

Var canvas = document.getElementById("myCanvas"): 

Var context = canVas.getContext(2d): 

var pathl=new Path2D("M10 10h 80v80h-80Z 7: 

context.fill(path1):; 

</script> 
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图 4.58 在 Firefox 中 预览 效果 图 4.59 使 用 SVG 路 径 绘制 图 形 


4.10 案例 实战 








本 节 将 结合 案例 介绍 Canvas API 高 级 应 用 。 
。121。 
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| 4.10.1 设计 基本 动画 
视频 讲 贫 | ”设计 动画 的 基本 步 又: 
fp 第 1 步 ， 清 空 canvas。 最 简单 的 方法 是 使 用 clearRect 0 方法 清空 画布 。 
全 ”| 
时 都 要 重 设 原始 状态 ， 这 时 需要 使 用 save0 方 法 先 保存 canvas 设置 状态 。 
| 第 3 步 ， 绘 制 动 画 图 形 。 这 一 步 才 是 重 给 动画 帧 。 





第 2 步 ， 保 存 canvas 状态 。 如 果 要 改变 canvas 设置 状态 ， 如 样式 、 变 形 等 ， 又 要 在 每 画 一 帧 之 


| 第 4 步 ， 恢 复 canvas 状态 ， 如 果 已 经 保存 了 canvas 的 状态 ， 可 以 使 用 restore() 方 法 先 恢复 它 ， 然 


| 后 重 绘 下 一 帧 。 

| 有 3 种 方法 可 以 实现 动画 操控 : 

加 ”setInterval(function, delay): 设 定好 间隔 时 间 delay 后 ，function 会 定期 执行 。 
setTimeout(function, delay): 在 设 定好 的 时 间 delay 之 后 ， 执 行 函数 function。 


键 帧 间隔 的 时 间 ， 浏 览 器 自动 设置 。 


| 应 的 图 形 组 合 效 果 ， 通 过 动画 来 循环 显示 所 有 参数 的 组 合 效果 ， 演 示 如 图 4.60 所 示 。 
| 具体 代码 解析 请 扫 码 学 习 。 
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| 图 4.60 设计 图 形 组 合 动画 
| 4.10.2 颜色 选择 器 


本 例 使 用 gettmageData0) 方 法 展示 鼠标 光标 移动 下 的 颜色 ， 效 果 如 图 4.61 所 示 。 
有 具体 代码 解析 请 扫 码 学 习 。 








图 4.61 设计 图 形 组 合 动画 


“2 


requestAnimationFrame(callback): 告诉 浏览 器 希望 执行 动画 ， 并 请 求 浏览 器 调用 指定 的 
callback 函数 在 下 一 次 重 绘 之 前 更 新 动画 。requestAnimationFrame() 函 数 不 需 要 指定 动画 关 


【示例 】 下 面 示 例 在 画布 中 绘制 一 个 红色 方块 和 一 个 圆 形 球 ， 让 它们 重 受 显示 ,然后 使 用 一 个 
变量 从 图 形 上 下 文 的 globalCompositeOperation 属性 的 所 有 参数 构成 的 数组 中 挑选 一 个 参数 来 显示 对 
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4.10.3 给 图 像 去 色 


本 例 在 4.8.4 节 示例 基础 上 ， 设 计 通 过 按钮 控制 图 像 的 色彩 处 理 ， 当 单 击 “ 反 色 图 像 ” 按 钮 时 ， 
让 图 像 反 色 显 示 ， 当 单 击 “ 灰 色 图 像 ” 按 钮 时 ， 让 图 像 以 灰 度 图 显示 ， 效 果 如 图 4.62 所 示 。 
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(a) 反 色 图 像 (b) 灰色 图 像 
图 4.62 设计 图 像 色 彩 处 理 
具体 代码 解析 请 扫 码 学 习 。 


4.10.4 ”缩放 图 像 和 反 锯齿 处 理 


在 drawImage0 方 法 中 ， 通过 缩放 第 二 块 画布 的 大 小 ， 可 以 实现 图 像 的 实时 缩放 显示 ， 再 利用 画 
布 环境 的 imageSmoothingEnabled 属性 , 可 以 设置 放大 显示 的 图 像 是 否 以 反 锯齿 〈 即 平滑 方式 ) 显示 。 
示例 代码 如 下 所 示 ， 演 示 效 果 如 图 4.63 所 示 。 
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(a) 以 锯齿 方式 放大 图 像 (b) 以 平滑 方式 放大 图 像 三 

图 4.63 设计 缩放 图 像 

具体 代码 解析 请 扫 码 学 习 。 二 下 站 
4.10.5 ”设计 运动 动画 

在 上 面 示例 中 ， 我 们 初步 掌握 了 基本 动画 的 设计 方法 ， 本 节 我 们 将 会 对 运动 有 更 深 的 了 解 并 学 | 视频 讲解 

会 添加 一 些 符合 物理 的 运动 。 设 计 效 果 如 图 4.64 所 示 。 
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具体 操作 步骤 请 扫 码 学 习 。 





图 4.64 设计 长 尾 效果 


4.10.6 ”设计 地 球 和 月 球 公转 动画 


| 本 例 采用 window.requestAnimationFrame() 方 法 做 一 个 小 型 的 太阳 系 模拟 动画 ， 效 果 如 图 4.65 所 
| 示 。 这 个 方法 提供 了 更 加 平缓 并 更 加 有 效率 的 方式 来 执行 动画 ， 当 系 


| 调用 绘制 动画 帧 。 一 般 每 秒 钟 回调 函数 执行 60 次 ， 也 有 可 能 会 降低 。 




















有 具体 代码 解析 请 扫 码 学 习 。 


图 4.65 ”设计 地 球 和 月 球 公转 动画 效果 


4.11 在 线 练 司 
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准备 好 了 重 绘 条 件 的 时 候 ， 才 


使 用 HTML Canvas (画布 ) 实现 2D 绘制 图 形 、 图 像 及 其 他 动画 效果 。 





HTML5 音频 和 视频 


HTML5 新 增 了 两 个 多 媒体 元 素 : audio 和 video， 其 中 audio 元 素 专门 用 来 播放 网 络 音 
频数 据 ， 而 video 元 素 专门 用 来 播放 网 络 视频 或 电影 。 另 外 ，HTMLS 规范 了 多 媒体 API， 多 


许 用 户 通过 JavaScript 脚本 操控 多 媒体 对 象 。 


【学 习 重 点 】 

WI 使 用 <audio> 和 <video> 标 签 。 

MW 了 解 audio 和 video 对 象 的 属性 、 方 法 和 事件 。 

WI ”能够 使 用 audio 和 video 设计 音频 和 视频 播放 界面 。 


mR A 


5.1 使 用 HTML5 音频 和 视频 


| 目前 ,现代 浏览 器 都 支持 HTML5 的 audio 元 素 和 video 元 素 , 如 IE 9.0+、Firefox 3.5+、Opera 10.5+、 


Chrome 3.0+、Safari 3.2+ 等 。 
由 回 | 网 
5.1.1 使 用 <audio> 
<audio> 标 签 可 以 播放 声音 文件 或 音频 流 , 支持 Ogg Vorbis、MP3、Wav 等 音频 格式 , 其 用 法 如 下 。 
<audio src="samplesong.mp3" controls="controls"></audio> 


| 其 中 sre 属性 用 于 指定 要 播放 的 声音 文件 ，controls 属性 用 于 设置 是 否 显示 工具 条 。<audio> 标 签 
| 可 用 的 属性 如 表 5.1 所 示 。 


表 5.1 <audio> 标 签 支持 属性 


属 性 说 明 
autoplay 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 


loop | loop | 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 


如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 
如 果 使 用 "autoplay"， 则 忽略 该 属性 


ste | wl | 要 播放 的 音频 的 URL 
次 提示 ;如果 浏 览 器 不 支持 <audio> 标 答 ， 可 以 在 <audio> 与 </laudio> 标 识 符 之 间 访 入 替换 的 HTML 
字符 串 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 。 例 如 : 


<audio src=" test.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 


替换 内 容 可 以 是 简单 的 提示 信息 , 也 可 以 是 一 些 备 用 音频 插件 , 或 者 是 音频 文件 的 链接 等 。 


| 【示例 1] <audio> 标 签 可 以 包含 多 个 <source> 标 签 ， 用 来 导入 不 同 的 音频 文件 ， 浏 览 器 会 自动 先 
| 择 第 一 个 可 以 识别 的 格式 进行 播放 。 


preload preload 





| <audio controls="controls"> 
| <source src="medias/test.ogg" type="audio/ogg"> 
| <source src="medias/test.mp3" type="audio/mpeg"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 5.1 所 示 ， 可 以 看 到 出 现 了 一 个 比较 简单 的 音频 播 
| 放 器 ， 包 含 了 播放 、 暂 停 、 位 置 、 时 间 显 示 、 音 量 控制 等 常用 控件 按钮 。 
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【补充 】 | 

<source> 标 签 可 以 为 <video> 和 <audio> 标 签 定义 多 媒体 资源 , 它 必须 包 训 在 <video> 或 <anudio> 标 识 | 
符 内 。<source> 标 签 包含 3 个 可 用 属性 : 
media: 定义 媒体 资源 的 类 型 。 
sre: 定义 媒体 文件 的 URL。 
type: 定义 媒体 资源 的 MIME 类 型 。 如 果 媒 体 类 型 与 源 文件 不 匹配 , 浏览 器 可 能 会 拒绝 播放 。 
可 以 省 略 type 属性 ， 让 浏览 器 自动 检测 编码 方式 。 

为 了 兼容 不 同 浏览 器 ， 一 般 使 用 多 个 <source> 标 签 包含 多 种 媒体 资源 。 对 于 数据 源 ， 浏 览 器 会 按 
照 声 明 顺 序 进 行 选 择 ， 如 果 支 持 的 不 止 一 种 ， 那 么 浏览 器 会 优先 播放 位 置 靠 前 的 媒体 资源 。 数 据 源 列 
表 的 排放 顺序 应 按照 用 户 体 验 由 高 到 低 ， 或 者 服务 器 消耗 由 低 到 高 列 出 。 

【示例 2】 下 面 示例 演示 了 如 何在 页 面 中 插入 背景 音乐 ; 在 <audio> 标 签 中 设置 autoplay 和 loop 
属性 ， 详 细 代码 如 下 所 示 。 | 

<audio autoplay loop> 

<source src="medias/test.ogg" type="audio/ogg"> 
<source stc="medias/test.mp3" type="audio/mpeg"> 

您 的 浏览 器 不 支持 audio 标签 。 

</audio> 


5.1.2 使 用 <video> 
<video> 标 签 可 以 播放 视频 文件 或 视频 流 ,支持 Ogg、MPEG 4、WebM 等 视频 格式 ， 其 用 法 如 下 。 
<video src="samplemovie.mp4" controls="controls"></video> 


其 中 sre 属性 用 于 指定 要 播放 的 视频 文件 , controls 属性 用 于 提供 播放 、 暂停 和 音量 控件 。<video> | 
标签 可 用 的 属性 如 表 5.2 所 示 。 | 


加 图 加 























表 5.2 <video> 标 签 支持 属性 | 


























属 性 什 描述 | 
autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 | 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 “播放 ”按钮 | 
height pixels | 设置 视频 播放 器 的 高 度 | 
loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 | 
muted muted 设置 视频 的 音频 输出 应 该 被 静音 | 
poster URL 设置 视频 下 载 时 显示 的 图 像 ， 或 者 在 用 户 单 击 “ 播 放 ” 按 钮 前 显示 的 图 像 | 

如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 ”| 
preload preload "autoplay"， 则 忽略 该 属性 | 


we 


名 ee 从 入 门 到 精通 ( 微 梨 精 编 版 ) 
RN 


续 表 
属 性 值 描述 
要 播放 的 视频 的 URL 


a Pe 
[补充 】 


| HTMLS5 的 <video> 标 签 支持 3 种 常用 的 视频 格式 ， 简 单 说 明 如 下 (浏览 器 支持 情况 :Safari 3+、 
| Firefox 4+、Opera 10+、Chrome 3+、IE 9+ 等 )。 
| 加 ”Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

回 ”MPEG 4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 


回 “WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 


疱 提示 : 如 果 浏 览 器 不 支持 <video> 标 签 ， 可 以 在 <video> 与 </video> 标 识 符 之 间 谋 入 殖 换 的 HTML 
字符 串 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 。 例 如 : 








| 

| 

| 

| 

| 

| <video src=" test.mp4" controls="controls"> 

| 您 的 浏览 器 不 支持 video 标签 。 

| </video> 

| 【示例 1】 下 面 示例 使 用 <video> 标 签 在 页 面 中 嵌入 一 段 视频 ， 然 后 使 用 <source> 标 签 链接 不 同 的 
| 视频 文件 ， 浏 览 器 会 自己 选择 第 一 个 可 以 识别 的 格式 。 

| <video controls> 

| <source src="medias/trailer.ogg" type="video/oge"> 

| <source stc="medias/trailer.mp4" type="video/mp4"> 

| 您 的 浏览 器 不 支持 video 标签 。 

| </video > 

| 
| 
| 
| 
| 
| 
| 
| 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 5.2 所 示 ， 当 鼠标 经 过 播放 画面 ， 可 以 看 到 出 现 
个 比较 简单 的 视频 播放 控制 条 ， 包 含 了 播放 、 和 暂停 、 位 置 、 时 间 显示 、 音 量 控制 等 常用 控件 。 





图 5.2 播放 视频 
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页 -外 





为 <video> 标 签 设 置 controls 属性 ， 可 以 在 页 面 上 以 默认 方式 进行 播放 控制 。 如 果 不 设置 controls | 
属性 ， 那 么 在 播放 的 时 候 就 不 会 显示 控制 条 界面 。 | 
【示例 2】 通 过 设置 autoplay 属性 ， 不 需要 播放 控制 条 ， 音 频 或 视频 文件 就 会 在 加 载 完成 后 自动 | 





播放 。 
<video autoplay> 
<source src="medias/trailer.ogg" type= "video/ogg"> 
<source SIc="medias/trailermp4" type="video/mp4"> | 
您 的 浏览 器 不 支持 video 标签 。 ! 


</video > | 


也 可 以 使 用 JavaScript 脚本 控制 媒体 播放 ， 简 单 说 明 如 下 : 
回 load0: 可 以 加 载 音 频 或 者 视频 文件 。 
回 play0: 可 以 加 载 并 播放 音频 或 视频 文件 ， 除 非 已 经 暂停 ， 否 则 默认 从 开头 播放 。 
pause0: 暂停 处 于 播放 状态 的 音频 或 视频 文件 。 
canPlayType(type): 检测 video 元 素 是 否 支 持 给 定 MIME 类 型 的 文件 。 
【示例 3】 下 面 示例 演示 如 何 通过 移动 鼠标 来 触发 视频 的 play 和 pause 功能 。 设 计 当 用 户 移动 鼠 
标 到 视频 界面 上 时 ， 播 放 视频 ， 如 果 移 出 鼠标 ， 则 暂停 视频 播放 。 
<video id="movies" onmouseover="this.play0" onmouseout="this.pause0" autobuffer="trmue" 
width="400px" height="300px"> 
<source src="medias/trailer.ogv" type='video/ogg: codecs="theora, vorbis"> 
<source src="medias/trailer.mp4" type='video/mp4> 
</video> 





上 面 代码 在 浏览 器 中 预览 ， 显示 效 果 如 图 5.3 所 示 。 


-5 本 到 
中 -全 htpi/localho.. - 旦 C | E localhost 























图 53 使 用 鼠标 控制 视频 播放 
5.1.3 ”设置 属性 


audio 和 video 元 素 拥有 相同 的 脚本 属性 ， 下 面 对 这 些 属性 进行 简单 介绍 。 

回 autobuffer 属性 

可 读 写 属性 。 使 用 该 属性 可 以 使 得 audio 或 video 元 素 实现 自动 缓冲 ， 默 认 值 为 false， 即 audio 
或 video 元 素 默 认 情 况 下 并 不 自动 缓冲 。 如 果 值 为 tue, 则 自动 缓冲 , 但 并 不 播放 。 如果 使 用 了 autoplay 
属性 ， 则 autobuffer 属性 会 被 忽略 。 其 用 法 见 下 面 的 示例 。 














“se 


mR A 


<audio controls="controls" autobuffer="true"> 
<source src="samplesong.ogg" type="audio/oge"> 
<source src="samplesong.mp3" type="audio/mpeg"> 
您 的 浏览 器 不 支持 audio 标签 。 


好 | 


| 可 读 写 属性 。 使 用 该 属性 可 以 实现 页 面 加 载 后 音频 一 旦 就 绪 即 开始 自动 播放 。 使 用 autoplay 属性 
| 相 比 使 用 脚本 控制 音频 或 视频 播放 来 得 简便 ， 其 值 也 可 以 设置 为 true 或 false。 如 果 值 为 tme 或 
| autoplay， 则 当 音 频 或 视频 缓冲 到 足够 多 时 即 开始 播放 。 其 用 法 见 下 面 的 示例 。 





<audio controls="controls" autoplay="autoplay"> 
| <source SIc="samplesong.0gg" type="audio/oge"> 
| <source src="samplesong.mp3" type="audio/mpeg"> 
| 您 的 浏览 器 不 支持 audio 标签。 
| </audio> 

buffered 属性 
| 只 读 属性 ， 用 于 返回 一 个 TimeRanges 对 象 ， 确 认 浏 览 器 已 经 缓存 媒体 文件 。 

| controls 属性 

| 可 读 写 属性 。 该 属性 为 布尔 值 ， 可 以 为 媒体 文件 提供 用 于 播放 的 控制 条 ,包含 播放 、 和 暂停、 定位 、 
| 时 间 显示 、 音 量 控制 、 全 屏 切 换 等 常用 控件 ， 其 用 法 如 下 。 在 将 来 的 标准 中 ， 有 望 在 播放 控件 中 看 到 
| 字幕 和 音 轨 。 开 发 人 员 如 果 不 希望 使 用 浏览 器 默认 的 控制 条 ， 也 可 以 使 用 脚本 来 自 定义 控制 条 。 其 用 
| 法 见 下 面 的 示例 。 

| <audio controls="controls"> 
| <source src="samplesong.ogg" type="audio/ogg"> 
| <source src="samplesong.mp3" type="audio/mpeg"> 
| 您 的 浏览 器 不 支持 audio 标签 。 
| </audio> 

| currentSre 属性 
| 

| 

| 

| 





| 只 读 属 性 ， 无 默认 值 。 用 于 返回 媒体 数据 的 URL 地 址 ， 如 果 媒 体 URL 地 址 未 指定 ， 则 返回 一 个 
| 空 字符 串 。 
| currentTime 属性 
可 读 写 属性 ， 无 默认 值 。 用 于 获取 或 设置 当前 播放 位 置 ， 返 回 值 为 时 间 ， 单 位 为 秒 。 
defaultPlaybackRate 
可 读 写 属 性 ， 无 默认 值 。 用 于 获取 或 设置 当前 播放 速率 ， 前 提 是 用 户 没有 使 用 快 进 或 快 退 控件 。 
duration 属性 
| 只 读 属性 ， 无 默认 值 。 用 于 获取 当前 媒体 的 持续 时 间 ， 返 回 值 为 时 间 ， 单 位 为 秒 。 
| 回 ended 属性 
| 














只 读 属性 ， 无 默认 值 。 用 于 返回 一 个 布尔 值 ， 以 获悉 媒体 是 否 播放 结束 。 
回 eror 属性 


| 只 读 属 性 ， 无 默认 值 。 用 于 返回 一 个 MediaError 对 象 以 表明 当前 的 错误 状态 ， 如 果 没 有 出 现 错 
| 误 ， 则 返回 null。 错 误 状 态 共 有 4 个 可 能 值 ， 分 别 为 : 

| > MEDIA ERR ABORTED (数字 值 为 1) : 媒体 资源 获取 异常 一 一 媒体 数据 的 下 载 过 
| 程 因 用 户 操作 而 终止 。 
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> MEDIA_ERR_NETWORK (数字 值 为 2): 网 络 错误 一 一 在 媒体 数据 已 经 就 绪 时 用 户 | 
停止 了 媒体 下 载 资源 的 过 程 。 | 
> MEDIA ERR_DECODE (数字 值 为 3) : 媒体 解码 错误 一 一 在 媒体 数据 已 经 就 绪 时 解 | 
码 过 程 中 出 现 了 错误 。 | 
> MEDIA ERR SRC_ NOT SUPPORTED (数字 值 为 4) : 媒体 格式 不 被 支持 。 
initialTime 属性 
只 读 属性 ， 无 默认 值 。 用 于 获取 最 早 的 可 用 于 回放 的 位 置 ， 返 回 值 为 时 间 ， 单 位 为 秒 。 
回 loop 属性 | 
可 读 写 属性 .用 于 获取 或 设置 当 媒体 文件 播放 结束 时 是 否 再 重新 开始 播放 。 其 使 用 方法 如 下 所 示 。 | 
<audio controls="controls" loop="loop"> 
<source src="samplesong.mp3" type="audio/mpeg"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
muted 属性 
可 读 写 属性 , 无 默认 值 。muted 属性 为 布尔 值 ， 用 于 获取 或 设置 当前 媒体 播放 是 否 开启 静音 ,true 
为 开启 静音 ，false 为 未 开启 静音 。 如 果 对 其 赋值 ， 则 可 以 设置 播放 时 是 否 静音 。 
networkState 属性 
只 读 属性 。 用 于 返回 媒体 的 网 络 状态 ， 共 有 4 个 可 能 值 。 
> NETWORK_EMPTY (数字 值 为 0) : 元 素 尚未 初始 化 。 
> NETWORK_IDLE (数字 值 为 1) : 加 载 完 成 ， 网 络 空闲 。 
> NETWORK_LOADING (数字 值 为 2) : 媒体 数据 加 载 中 。 
> NETWORK_NO_SOURCE (数字 值 为 3) : 因为 不 存在 支持 的 编码 格式 ， 加 载 失败 。 
paused 属性 
只 读 属性 ， 无 默认 值 。 用 于 返回 一 个 布尔 值 ， 表 示 媒 体 是 否 暂停 播放 ，true 表示 暂停 ，false 表示 
正在 播放 。 
playbackRate 属性 
可 读 写 属性 ， 无 默认 值 。 用 于 读 取 或 设置 媒体 资源 播放 的 当前 速率 。 
played 属性 | 
只 读 属 性 ， 无 默认 值 。 用 于 返回 一 个 TimeRanges 对 象 ， 标 明 媒 体 资源 在 浏览 器 中 已 播放 的 时 间 | 
范围 。TimeRanges 对 象 的 length 属性 为 已 播放 部 分 的 时 间 段 ， 该 对 象 有 两 个 方法 ，end 方法 用 于 返回 | 
已 播放 时 间 段 的 结束 时 间 ，start 方法 用 于 返回 已 播放 时 间 段 的 开始 时 间 ， 其 用 法 见 下 面 的 示例 。 
Var ranges = document.getElementById('myVideo').played: 
for (var i=0: i<ranges.length: i++) 
Var start = ranges.start(): 


Var end = ranges.end(i): 
alert(" 从 "+ start +" 开 始 播放 到 " + end+" 结 束 。"): 











} 


回 ”preload 属性 | 
可 读 写 属性 , 无 默认 值 。 用 于 定义 视频 是 否 预 加 载 , 该 属性 有 3 个 可 选 值 : none、 metadata 和 auto。 | 

如 果 不 用 该 属性 ， 则 默认 为 auto， 分 别 介绍 如 下 。 
> ”none: 不 进行 预 加 载 。 当 页 面 制作 人 员 认 为 用 户 不 希望 直接 观看 此 视频 , 或 者 减少 HITP 
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| 请 求 时 可 以 设置 该 项 。 
| > ”metadata: 部 分 预 加 载 。 使 用 此 属性 值 ， 代 表 页 面 制作 者 认为 用 户 不 期 望 直接 观看 此 视 
| 频 ， 但 为 用 户 提供 一 些 元 数据 〈 包 括 尺 寸 、 第 一 帧 、 曲 目 列表 、 持 续 时 间 等 ) 。 

全 站 | > ”auto: 全 部 预 加载 。 

i preload 属性 的 用 法 如 下 所 示 。 


| 
Note <video src="samplemovie.mp4" preload="auto"> 
</video> 
| 
| 
| 
| 


回 readyState 属性 
只 读 属 性 ， 无 默认 值 。 用 于 返回 媒体 当前 播放 位 置 的 就 绪 状 态 ， 共 有 以 下 5 个 可 能 值 。 
> HAVE NOTHING (数字 值 为 0) : 当前 播放 位 置 没 有 有 效 的 媒体 资源 。 
> HAVE METADATA (数字 值 为 1) : 媒体 资源 确认 存在 且 加 载 中 ， 但 当前 位 置 没有 能 
够 加 载 到 有 效 的 媒体 数据 以 进行 播放 。 
> HAVE CURRENT_ DATA (数字 值 为 2) : 已 获取 到 当前 播放 数据 ， 但 没有 足够 的 数 
据 进行 播放 。 
> HAVE _ FUTURE _DATA (数字 值 为 3) : 在 当前 位 置 已 获取 到 后 续 播放 媒体 数据 ， 可 
| 以 进行 播放 。 
| > HAVE_ ENOUGH DATA (数字 值 为 4) : 媒体 数据 可 以 进行 播放 ， 且 浏览 器 确认 媒体 
| 数据 正 以 某 一 种 速率 进行 加 载 并 有 足够 的 后 续 数 据 以 继续 进行 播放 ， 而 不 会 使 浏览 器 
| 的 播放 进度 赶 上 加 载 数据 的 末端 。 
| 回 seekable 属性 
| 





只 读 属性 ， 无 默认 值 。 用 于 返回 一 个 TimeRanges 对 象 ， 表 明 可 以 对 当前 媒体 资源 进行 请 求 。 

seeking 属性 

只 读 属 性 , 无 默认 值 。 用 于 返回 一 个 布尔 值 , 表示 浏览 器 是 否 正 在 请 求 某 一 播放 位 置 的 媒体 数据 ， 
ture 表示 浏览 器 正在 请 求 数据 ， 而 false 表示 浏览 器 已 经 停止 请 求 数据 。 

加 ”sre 属性 

可 读 写 属性 , 无 默认 值 。 用 于 指定 媒体 资源 的 URL 地 址 ， 与 <img> 标 签 类 似 ， 可 与 poster 属性 连 
用 。poster 属性 用 于 指定 一 张 蔡 换 图 片 ， 如 果 当 前 媒体 数据 无 效 ， 则 显示 该 图 片 。 其 用 法 如 下 所 示 。 
| <video src="http://www.lidongbo.com/samplemovie .mp4" poster=" http://www.lidongbo.com/samplemovie.pne"> 
| </video> 
volume 属性 

可 读 写 属性 ， 无 默认 值 。 用 于 获取 或 设置 媒体 资源 的 播放 音量 ， 范 围 为 0.0 一 1.0，0.0 为 静音 ， 

| 1.0 为 最 大 音量 。 注 意 音量 大 小 并 非 是 线性 变化 的 ， 如 果 同 时 使 用 了 muted 属性 ， 则 此 属性 会 被 忽略 。 


| 5.1.4 设置 方法 


| 
| audio 和 video 元 素 拥有 相同 的 脚本 方法 ， 下 面 简单 介绍 这 些 方法 。 

| canPlayType() 方 法 

| 用 于 返回 一 个 字符 串 以 表明 客户 端 是 否 能 够 播放 指定 的 媒体 类 型 ， 其 用 法 如 下 。 
| 

| 

| 

| 





var canPlay = media.canPlayType(type) 
其 中 media 指 页 面 中 的 audio 或 video 元 素 ， 参 数 type 为 客户 端 浏览 器 能 够 播放 的 媒体 类 型 。 该 
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方法 返回 以 下 可 能 值 之 一 。 
> ”probably: 表示 浏览 器 确定 支持 此 媒体 类 型 。 
> maybe: 表示 浏览 器 可 能 支持 此 媒体 类 型 。 
> ” 空 字符 串 : 表示 浏览 器 不 支持 此 媒体 类 型 。 
load0 方 法 | 
用 于 重 置 媒 体 元 素 并 重新 载 入 媒体 ， 不 返回 任何 值 ， 该 方法 可 中 止 任何 正在 进行 的 任务 或 事件 。 
元 素 的 playbackRate 属性 值 会 被 强行 设 为 defaultPlaybackRate 属性 的 值 ， 而 且 元 素 的 error 值 会 被 强 | 
行 设置 为 null。 | 
【示例 】 在 下 面 示例 中 ， 通 过 单 击 按钮 可 以 重新 载 入 另 一 个 新 的 视频 。 | 


<video controls> 
<source src="medias/video.ogv" type= video/ogg> 
<source src="medias/video.mp4" type= video/mp4> 
您 的 浏览 器 不 支持 视频 播放 。 
</video> 
<input type="button" value=" 载 入 新 的 视频 ” onclick="loadNewVideo0"> 
<script> 
function loadNewVideoO { 
Var Video = document.getElementsByTagName('video")[0]: 
Var sources = video.getElementsByTagName('source'): 
sources[0].src ='medias/video2.ogV': 
sources[1].src = "medias/video2.mp4'; 
video.load0:; /用 load 方法 载 入 新 的 视频 














} 

</script> 

pause() 方 法 

用 于 暂停 媒体 的 播放 ， 并 将 元 素 的 paused 属性 的 值 强行 设置 为 true。 
play0 方 法 

用 于 播放 媒体 ， 并 将 元 素 的 paused 属性 的 值 强行 设置 为 false。 


5.1.5 ”设置 事件 


audio 和 video 元 素 支 持 HTMLS5 的 媒体 事件 ， 详 细 说 明 如 表 5.3 所 示 。 使 用 JavaScript 脚本 可 以 | 
捕 提 这 些 事件 并 对 其 进行 处 理 。 处 理 这 些 事件 一 般 有 下 面 两 种 方式 。 
一 种 是 使 用 addEventListener(0 方 法 监听 ， 其 用 法 如 下 : 
addEventListener(" 事 件 类 型 ". 处 理 函 数 .处理 方式 ) 
另 一 种 是 直接 赋值 ， 即 获取 事件 句柄 的 方法 。 例 如 ，video.onplay=begin playing， 其 中 
begin_playing 为 处 理 函 数 。 


表 5.3 音频 与 视频 相关 事件 








事 件 描 述 | 
abort | 浏览 器 在 完全 加 载 媒 体 数 据 之 前 中 止 获取 媒体 数据 





浏览 器 能 够 开始 播放 媒体 数据 ， 但 估计 以 当前 速率 播放 不 能 直接 将 媒体 播放 完 ， 


nb 即 可 能 因 播 放 期 间 需 要 缓冲 而 停止 
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| be 
| 续 表 
| 事件 描 述 
| canplaythrough 浏览 器 以 当前 速率 可 以 直接 播放 完整 个 媒体 资源 ， 在 此 期 间 不 需要 缓冲 
| durationchange 媒体 长 度 〈duration 属性 ) 改变 
emptied 媒体 资源 元 素 突 然 为 空 时 ， 可 能 是 网 络 错误 或 加 载 错 误 等 
ended 媒体 播放 已 抵达 结尾 
error 在 元 素 加 载 期 间 发 生 错误 
loadeddata 已 经 加 载 当前 播放 位 置 的 媒体 数据 
loadedmetadata 浏览 器 已 经 获取 媒体 元 素 的 持续 时 间 和 尺寸 
loadstart 浏览 器 开始 加 载 媒 体 数 据 
pause 媒体 数据 暂停 播放 
play 媒体 数据 将 要 开始 播放 
playing 媒体 数据 已 经 开始 播放 
progress 浏览 器 正在 获取 媒体 数据 
i 媒体 数据 的 默认 播放 速率 (defaultPlaybackRate 属性 ) 改变 或 播放 速率 


| 

| 

| 

| 

(playbackRate 属性 ) 改变 

readystatechange 就 绪 状 态 (ready-state》 改 变 

浏览 器 停止 请 求 数据 ， 媒 体 元 素 的 定位 属性 不 再 为 真 (seeking 属性 值 为 false) 








Seeked 且 定位 已 结束 

i 浏览 器 正在 请 求 数据 ， 媒 体 元 素 的 定位 属性 为 真 (seeking 属性 值 为 rue》 且 定位 
已 开始 

stalled 浏览 器 获取 媒体 数据 过 程 中 出 现 异常 

suspend 浏览 器 非 主动 获取 媒体 数据 ， 但 在 取 回 整个 媒体 文件 之 前 中 止 

timeupdate 媒体 当前 播放 位 置 (currentTime 属性 ) 发 生 改变 

volumechange 媒体 音量 (volume 属性 ) 改变 或 静音 (muted 属性 ) 

waiting 媒体 已 停止 播放 但 打算 继续 播放 


【示例 】 下 面 示例 使 用 play0 和 pause0 方 法 控制 视频 的 播放 和 和 暂停 播放 ， 使 用 ended 事件 监听 视 


频 播 放 是 否 完毕 ， 使 用 error 事件 监听 播放 过 程 中 发 生 的 各 种 异常 ， 并 及 时 进行 提示 。 

| <body onload="initO"> 

| <video id="videol" autoplay oncanplay="startVideo0" onended="stopTimeline0" autobuffer="true" 
| width="400px" height="300px"> 

| <source src="medias/volcano.ogv" type='video/ogg'’> 

| <source src="medias/volcano.mp4" type='video/mp4> 

| </video><br> 

| <button onclick="play0"> 播 放 </button> 

| <button onclick="pause0"> 暂 停 </button> 

| ‘<script type="text/javascript"> 
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SI 
Var Video: 
function initO{ | 
Video = document.getElementById("video1"): | 
/监听 视频 播放 结束 事件 | & 
video.addEventListener("ended", functionO{ | 全 | 


alert(" 播 放 结束 。"): | 
一 Xote 
// 发 生 错 误 2 
Video.addEventListener("error".fonction0O{ | 
Switch (video.error.code){ | 
case MediaError MEDIA ERROR ABORTED: 
alert(" 视 频 的 下 载 过 程 被 中 止 。"); 
break; 
case MediaErrorMEDIA ERROR NETWORK: 
alert(" 网 络 发 生 故 障 ， 视 频 的 下 载 过 程 被 中 止 。"); 
break: 
case MediaError. MEDIA ERROR DECODE: 
alert(" 解 码 失败 。"); 
break 
case MediaError. MEDIA ERROR SRC NOT SUPPORTED: 
alert(" 媒 体 资源 不 可 用 或 媒体 格式 不 被 支持 。"); 
break: 
default: 
alert(" 发 生 未 知 错误 。"); 





) 
} .false): | 
} | 
function playO {// 播 放 视频 | 
Video play0: | 
function pauseO{ /暂停 播放 
Video.pause(): 
} 
</script> 
</body> 





5.2 案例 实战 


本 节 将 通过 多 个 案例 练习 如 何 灵活 使 用 JavaScript 脚本 控制 HTMLS 多 媒体 播放 。 
5.2.1 设计 音乐 播放 器 


如 果 需 要 在 页 面 上 播放 一 段 音 频 ， 同 时 又 不 想 被 默认 的 控制 界面 影响 显示 效果 ， 则 可 创建 一 个 隐 | 视频 讲 
藏 的 audio 元 素 ， 即 不 设置 controls 属性 ， 或 将 其 设置 为 false， 然 后 用 自 定义 控制 界面 控制 音频 的 播 | 
放 。 本 例 主 要 代码 如 下 ， 演 示 效 果 如 图 5.4 所 示 。 
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图 5.4 用 脚本 控制 音乐 播放 
具体 代码 解析 请 扫 码 学 习 。 


5.2.2 ”获取 播放 进度 


视频 讲解 | 在 播放 过 程 中 会 经 常 触发 timeupdate 事件 ， 通 过 该 事件 可 以 获取 当前 播放 位 置 的 变化 。 下 面 示例 
捕捉 timeupdate 事件 来 显示 当前 的 播放 进度 。 在 Chrome 浏览 器 中 预览 ， 可 以 在 文本 框 中 输入 一 个 要 
| 播放 的 视频 路 径 ， 或 者 自动 播放 默认 视频 ， 这 时 可 以 看 到 按钮 右 侧 显示 当前 视频 总 长 度 ， 以 及 播放 进 


| 度 ， 效 果 如 图 5.5 所 示 。 





























祝 频 地 址 : 

















图 5.5 显示 播放 进度 
具体 代码 解析 请 扫 码 学 习 。 
5.2.3 设计 视频 播放 器 


| 本 例 将 设计 一 个 视频 播放 器 ， 用 到 HTMLS5 提供 的 video 元 素 、 以 及 HTMLS5 提供 的 多 媒体 API 
| 的 扩展 ， 示 例 演示 效果 如 图 5.6 所 示 。 





sa136。 


第 9 章 HTMLL5 音频 和 视频 








视频 播放 器 











图 5.6 设计 视频 播放 器 
使 用 JavaScript 控制 播放 控件 的 行为 〈 自 定义 播放 控件 )， 实 现 如 下 功能 : 
利用 HTML+CSS 制作 一 个 自己 的 播放 控件 条 ， 然 后 定位 到 视频 最 下 方 。 
视频 加 载 loading 效果 。 
播放 、 和 暂停 。 
总 时 长 和 当前 播放 时 长 显示 。 
播放 进度 条 。 
全 屏 显 


具体 操作 步 又 请 扫 码 学 习 。 
5.2.4 ”视频 自动 截图 


因 办 办 办 办 轨 





本 示例 将 演示 如 何 抓 取 video 元 素 中 的 帧 画面 并 显示 在 动态 canvas 上 。 当 视频 播放 时 ， 定 期 从 视 | 
频 中 抓 取 图 像 帧 并 绘制 到 旁边 的 canvas 上 ， 当 用 户 单 击 canvas 上 显示 的 任何 一 帧 时 ， 所 播放 的 视频 | 


会 跳 转 到 相应 的 时 间 点 。 演 示 效 果 如 图 5.7 所 示 。 
-5 本 到 
《 Se +) Shep/ocalhost © | @ ccames: x 











图 5.7 查看 视频 帧 画面 二 全 
具体 操作 步骤 请 扫 码 学 习 。 
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5.2.5 ”视频 同步 字幕 


HTMLS 新 增 track 元 素 ， 用 于 为 video 元 素 播放 的 视频 或 使 用 audio 元 素 播放 的 音频 添加 字幕 、 
标题 等 文字 信息 。track 元 素 允 许 用 户 沿 着 audio 元 素 所 使 用 的 音频 文件 中 的 时 间 轴 ， 或 者 video 元 素 
所 使 用 的 视频 文件 中 的 时 间 轴 指定 时 间 同 步 的 文字 资源 。 

目前 ，Chrome 18+、Firefox 28+、IE 10+、Opera 12+ 和 Safari 6+ 以 上 版 本 浏览 器 提供 对 track 元 
素 的 支持 ， 不 包括 Firefox 30。 

track 是 一 个 空 元 素 , 其 开始 标签 与 结束 标签 之 间 并 不 包含 任何 内 容 , 必须 被 书写 在 video 或 audio 
元 素 内 部 。 如 果 使 用 source 元 索 ， 则 track 元 素 必须 被 书写 在 source 元 素 之 后 。 用 法 如 下 所 示 : 


<video width="320" height="240" controls="controls"> 
<source src="forrest_ gump.mp4" type="video/mp4" /> 
<source src="forrest gump.oge" type="video/ogg" /> 
<track kind="subtitles" sre="subs chi.srt" srclang="zh" label="Chinese"> 
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> 

</video> 

【示例 】 下 面 示例 使 用 video 元 素 播放 一 段 视频 ， 同 时 使 用 track 元 素 在 视频 中 显示 字幕 信息 ， 
演示 效果 如 图 5.8 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

</head> 

<body> 

<Video src="medias/test.webm" controls> 
<track kind="subtitles" src="medias/test.vtt" default></track> 
您 的 浏览 器 不 支持 video 元 素 

</video> 








DY localhost/testt.htrml + x Ne 


© | © localhost/test 








图 5.8 为 视频 添加 字幕 
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在 HIML5 中 ，track 元 素 包 含 几 个 特殊 用 途 的 属性 ， 说 明 如 表 5.4 所 示 。 


| 
表 5.4 track 元 素 属性 | 
属 性 值 说 了 明 | 


ei PE 规定 该 轨道 是 默认 的 ， 假 如 没有 选择 任何 轨道 。 例 如 : | 医 畏 
<track kind="subtitles" default src="chisubs.srt" srclang="zh"> 





表示 轨道 属于 什么 文本 类 型 。 例 如 : | 


i | 
人 <video width="320" height="240" controls="controls"> | 
kind descriptions <source src="forrest_ gump.mp4" type="video/mp4" /> 
Sc <track kind="subtites" src="subschi.srt" srclang="zh" label="Chinese"> 
sllillss <track kind="subtitles" src="subseng.srt" srclang="en" label="English"> 


</video> 


轨道 的 标签 或 标题 。 例 如 : 
label label <track kind="subtitles" label="Chinese subtitles" src="subschi.srt" 
srclane="zh" label="Chinese"> 


SIC url 轨道 的 URL 


轨道 的 语言 ， 若 kind 属性 值 是 "subtitles"， 则 该 属性 是 必需 的 。 例 如 : 


rho lglge code <track kind="subtitles" src="subschi.srt" srclang="zh" label="Chinese"> 





其 中 kind 属性 的 取 值 说 明 如 下 所 示 。 


captions: 该 轨道 定义 将 在 播放 器 中 显示 的 简短 说 明 。 

chapters: 该 轨道 定义 章节 ， 用 于 导航 媒介 资源 。 | 
descriptions: 该 轨道 定义 描述 ,用 于 通过 音频 描述 媒介 的 内 容 (假如 内 容 不 可 播放 或 不 可 见 )。 | 
metadata 该 轨道 定义 脚本 使 用 的 内 容 。 | 
subtitles: 该 轨道 定义 字幕 ， 用 于 在 视频 中 显示 字幕 。 | 


【拓展 】 

网 络 视频 文本 轨道 ,简称 为 WebVTT, 是 一 种 用 于 标记 文本 轨道 的 文件 格式 。 它 与 HTMLS 的 track | 

元 素 相 结合 ， 可 给 音频 、 视 频 等 媒体 添加 字幕 、 标 题 和 其 他 描述 信息 ， 并 同步 显示 。 
1. 文件 格式 

WebVTT 文件 是 一 个 以 UTF-8 为 编码 ， 以 .vtt 为 文件 扩展 名 的 文本 文件 。 | 

4 角 注意 : 如 果 要 在 服务 器 上 使 用 WebVTT 文件 ,可 能 需要 显 性 定义 其 内 容 类 型 例如， 在 Apache | 

服务 器 的 .htaccess 文件 中 加 入 : 


<Files mysubtitle vtt> 
ForceType text/vtt:charset=utf-8 
</Files> 
WebVTT 文件 的 头 部 按 如 下 顺序 定义 : 
(1) 可 选 的 字 节 顺序 标记 (BOM)。 
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(2) 字符 串 WEBVTT。 
(3) 一 个 空格 (Space) 或 者 制 表 符 (Tab)， 后 面 接任 意 非 回 车 换行 的 元 素 。 
(4) 两 个 或 两 个 以 上 的 “WEBVTT 行 结束 符 ”: 回 车 Y， 换 行 m， 或 者 同时 回 车 换行 mn。 
例如 : 
WEBVTIT 


Cue-1 
00:00:15.000 --> 00:00:18.000 
At the left we can see... 


2. WebVTT Cues 
WebVTT 文件 包含 一 个 或 多 个 WebVTT Cues， 各 个 WebVTT Cues 之 间 用 两 个 或 多 个 WebVTT 
行 结束 符 分 隔 开 来 。 
WebVTT Cue 允许 用 户 指定 特定 时 间 戳 范围 内 的 文字 〈 如 字幕 )， 也 可 以 给 WebVTT Cue 指定 一 
个 唯一 的 标识 符 ， 标 识 符 由 简单 字符 串 构成 ， 不 包含 “--> ”， 也 不 包含 任何 的 WebVTT 行 结束 符 。 每 
-个 提示 采用 以 下 格式 : 


[idstring] 

[hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms 

Text string 

标识 符 是 可 选项 ， 建 议 加 入 ， 因 为 它 能 够 帮助 组 织 文件 ， 也 方便 脚本 操控 。 

时 间 截 遵循 标准 格式 ;小 时 部 分 [hh:] 是 可 选 的 ， 毫 秒 和 秒 用 一 个 点 〈.) 分 离 ， 而 不 是 冒号 (:)。 


时 间 鹤 范围 的 后 者 必须 大 于 前 者 。 对 于 不 同 的 Cues， 时 间 截 可 以 重 释 ， 但 在 单个 Cue 中 ， 不 能 有 字 
符 串 “-->”， 或 两 个 连续 的 行 结束 符 。 

时 间 范 围 后 的 文字 可 以 是 单行 或 者 多 行 。 特 定 的 时 间 范 围 之 后 的 任何 文本 都 与 该 时 间 范 围 匹 配 ， 
直到 一 个 新 的 Cue 出 现 或 文件 结束 。 例 如 

Cue-8 


00:00:52.000 --> 00:00:54.000 
Idon'tthink so. You? 


Cue-9 

00:00:55.167 --> 00:00:57.042 

Tm Ok. 

3. WebVTT Cue 设置 

在 时 间 范 围 值 后 面 可 以 设置 Cue: 

[idstring] 

[hh:Jmm:ss.msmsms --> [hh:]mm:ssmsmsms [cue settings] 

Text string 

Cue 设置 能 够 定义 文本 的 位 置 和 对 齐 方式 ， 设 置 选项 说 明 如 表 5.5 所 示 。 
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表 5.5 Cue 设置 选项 















设 和 置 值 明 





说 




















vertical | al 将 文本 纵向 向 左 对 齐 Ir) 或 向 右 对 齐 d) 如: 日 文 的 字幕 ) 
| [-][0 or more] 行 位 置 ， 负 数 从 框 底部 数 起 ， 正 数 从 顶部 数 起 

me | aioow 百分数 意味 着 离 杠 项 部 的 位 置 

position | [0-100]%6 百分数 意味 着 文字 开始 时 离 框 左边 的 位 置 ( 如 英文 字幕 ) 
size | [oloow 百分数 意味 着 cue 框 的 大 小 是 整体 框架 宽度 的 百分比 





align start | middle || end 指定 cue 中 文本 的 对 齐 方式 


< 锯 注意 :如 果 没 有 设置 Cue 选项 ， 默 认 位 置 是 底部 居中 。 例 如 : 
Cue-8 


00:00:52.000 --> 00:00:54.000 align:start size:15% 
I don't think so. You? 








Cue-9 
00:00:55.167 --> 00:00:57.042 align:end line:10% 
T'm Ok. 


在 上 面 示例 代码 中 ，Cue-8 将 靠 左 对 齐 ， 文本 框 大 小 为 15%， 而 Cue-9 靠 右 对 齐 ， 纵 向 位 | 
置 距离 框 顶部 10%。 


4. WebVTT Cue 内 联 样 式 
用 户 可 以 使 用 WebVTT Cue 内 联 样 式 来 给 Cue 文本 添加 样式 ,这 些 内 联 样式 类 似 于 HTML 元 素 ， 
可 以 用 来 添加 语义 及 样式 。 可 用 的 内 联 样式 说 明 如 下 : 
c: 用 c 定 义 (CSS) 类 。 例 如 ，<c.className>Cue text</c>。 
i: 斜体 字 。 
b: 粗 体 字 。 
u: 添加 下 划 线 。 
ruby: 定义 类 似 于 HTML5 的 <mby> 元 素 。 在 这 样 的 内 联 样式 中 ， 人 允许 出 现 一 个 或 多 个 <rt> 
元 素 。 
v: 指定 声音 标签 。 例 如 ，<v Ian>This is useful for adding subtitles</v>。 注 意 此 声音 标签 不 会 
显示 ， 它 只 是 作为 一 个 样式 标记 。 
例如 : 
Cue-8 
00:00:52.000 --> 00:00:54.000 align:start size:15% 
<V Emo>I don'tthink so. <c.question>You?</c></v> 


办 办 办 办 办 


[al 


Cue-9 
00:00:55.167 --> 00:00:57.042 align:end line:10% 
<V Proog>ITm Ok.</v> 
上 面 示例 给 Cue 文本 添加 两 种 不 同 的 声音 标签 : Emo 和 Proog。 另 外 ， 一 个 question 的 CSS 类 被 
指定 ， 可 以 按 惯常 方法 在 CSS 链接 文件 ， 或 HTML 页 面 里 为 其 指定 样式 。 
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| 4 押 注意 : 要 给 Cue 文本 添加 CSS 样式 ， 需 要 用 一 个 特定 的 伪 选择 元 素 ， 例 如 


Video::cue(v[voice="Emo"]) { color:lime } 
给 Cue 文 本 添加 时 间 鹤 也 是 可 能 的 ， 表 示 在 不 同 的 时 间 ， 不 同 的 内 联 样式 出 现 ， 例 如 : 


Cue-8 
00:00:52.000 --> 00:00:54.000 
<c>Idon'tthink so.</c> <00:00:53.500><c>You?</c> 


虽然 所 有 文本 依旧 在 同一 时 间 显示 ， 不 过 在 支持 的 浏览 器 中 ， 可 以 用 :past 和 :future 伪 类 
为 其 显示 不 同样 式 。 例 如 : 


Video::cue(c:past) { coloryellow } 


HIML5 中 有 关 音 频 处 理 和 播放 的 API 包括 两 个 : Web Audio 和 audio 元 素 ，Web Audio 主要 用 来 
对 音频 数据 添加 音效 ， 如 过 滤 掉 音频 数据 中 的 杂音 让 声音 听 起 来 更 加 圆润 ,也 可 以 动态 设置 倾听 者 相 
对 于 音源 的 位 置 ， 让 每 个 位 置 听 起 来 的 效果 不 一 样 ， 这 在 游戏 中 是 经 常 需要 的 。 

除 此 之 外 ，Web Audio 提供 了 与 其 他 元 素 的 互 操作 性 ， 如 可 以 把 audio 元 素 中 输出 的 音频 数据 导 
| 入 Web Audio 中 ， 进 行 细 粒 度 的 处 理 然后 再 播放 出 来 。Web Audio 也 可 以 对 Web RTC 中 的 音频 进行 
| 处 理 ，Web RTC 是 让 两 个 或 多 个 用 户 进行 端 对 端的 视频 通信 的 API。 
| 权威 参考 : http://www.w3.org/TR/webaudio/ 
| 使 用 参考 : https://developer.mozilla.org/zh-CN/docs/Web/APLWeb_Audio_API 
| -个 简单 而 典型 的 Web Audio 流程 如 下 : 
| 第 1 步 ， 创 建 音频 上 下 文 。 
| 第 2 步 ， 在 音频 上 下 文 里 创建 源 一 例如 <audio>, 振荡 器 , 流 。 
| 第 3 步 ， 创 建 效 果 节 点 ， 例 如 混 响 、 双 二 阶 滤波 器 、 平 移 、 压 缩 。 
| 
| 
| 
| 





第 4 步 ， 为 音频 选择 一 个 目的 地 ， 例 如 你 的 系统 扬声器 。 
第 5 步 ， 连 接 源 到 效果 器 ， 对 目的 地 进行 效果 输出 。 
Web Audio API 所 涉及 内 容 较 多 ， 本 节 将 不 会 深入 探讨 ， 感 兴趣 的 读者 可 以 参考 上 面 提供 的 网 址 
深入 学 习 。 下 面 通过 一 个 简单 的 示例 介绍 Web Audio API 的 基本 用 法 。 
【示例 】 下 面 示例 利用 Web Audio API 在 页 面 中 设计 一 个 按钮 ， 当 鼠标 经 过 时 ， 在 非 正 浏览 器 
| 下 , 就 会 播放 出 类 似 电子 琴 琴 键 按 下 的 声音 , 而 且 每 次 鼠标 经 过 的 时 候 , 音调 都 会 发 生 有 规律 的 变化 ， 
| 如 图 5.9 所 示 。 







© [© locahotaoen/mysite/testhtml 


| 
| 

| 

| E HTMLS Web Audio, ee 
| : 

| 


图 5.9 动态 生成 声音 
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5.2.7 访问 多 媒体 属性 、 方 法 和 事件 


在 第 5.1.3、5.1.4、5.1.5 三 节 中 ， 我 们 分 别 介绍 了 HTML5 多 媒体 API 中 各 种 属性 、 方 法 和 事件 ， 
本 节 将 以 示例 的 形式 演示 如 何在 一 个 视频 中 实现 对 这 些 信息 进行 访问 和 操控 ， 示 例 效果 如 图 5.10 
所 示 。 
- -EN 








EEC = | S cwsera oome. 


HTML5 Web Video API 








TT ET 


loadstart progress suspend 0 abort 0 error 
emptied stalled loadedmetadata PR loadeddata RY Ccanplay 
canplaythrough playing waiting 天 了 seeking 5 seeked 
ended 0 durationchange timeupdate lZ03 play pause | 
ratechange 大腿 resize volumechange 0 | 


error 
currentSre flle://C/Users/8/Documents/www/testt/video/trailer mp4 crossOrigin undefined 

preload ona buffered [object TimeRanges] | 

seeking 中 56 currentTime S01S1797 | 

[3 defaultPlaybackRate 囊 | 

| 





played [object TimeRanges] seekable [object TimeRanges] 
autoplay alse loop false 


图 5.10 HTML5 多 媒体 API 接口 访问 
具体 操作 步骤 请 扫 码 学 习 。 





5.3 在 线 练 习 


使 用 多 媒体 丰富 网 站 的 效果 ， 丰 富 网 站 的 内 容 ， 突 出 网 站 的 重点 。 
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在 HIML4 中 ， 客 户 端 处 理 网 页 数据 主要 通过 cookie 来 实现 ， 但 cookie 存在 很 多 缺陷 ， 
如 不 安全 、 容 量 有 限 等 。HTML5 新 增 Web Database API， 用 来 替代 cookie 解决 方案 ， 对 于 
简单 的 key/value ( 键 值 对 ) 信息 ， 使 用 Web Storage 存储 会 非常 方便 。 另 外 ， 部 分 现代 浏览 
器 还 支持 不 同类 型 的 本 地 数据 库 ， 使 用 客户 端 数 据 库 可 以 减轻 服务 器 端的 压力 ， 提 升 Web 


应 用 的 访问 速度 。 


【 学 习 重 点 】 

WI 使 用 Web Storage。 

MH 使 用 Web SQL 数据 库 。 
MH 使 用 indexedDB 数据 库 。 
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6.1 Web Storage 


HTMLS5 的 Web Storage API 提供 了 两 种 客户 端 数据 存储 的 方法 : localStorage 和 sessionStorage。 
两 者 之 间 的 重要 区 别 如 下 ， 具 体 用 法 基本 相同 。 
localStorage: 用 于 持久 化 的 本 地 存储 ， 除 非 主 动 删除 ， 否 则 数据 永远 不 会 过 期 。 | 
sessionStorage: 用 于 存储 本 地 会 话 (session) 数据 ， 这 些 数据 只 有 在 同一 个 会 话 周期 内 才能 | 
访问 ， 当 会 话 结束 后 数据 也 随 之 销毁 ， 如 关闭 网 页 ， 切 换 选 项 卡 视图 等 。 因 此 sessionStorage | 
是 一 种 短期 本 地 存储 方式 。 | 
Web Storage 的 优势 : | 
存储 空间 比 cookie 大 很 多 。 | 
存储 内 容 不 会 反馈 给 服务 器 ， 而 cookie 信息 会 随 着 请 求 一 并 发 送 给 服务 器 。 
Web Storage 提供 了 一 套 丰 富 的 接口 ， 使 得 数据 操作 更 为 简便 。 
独立 的 存储 空间 ， 每 个 域 (包括 子 域 ) 有 独立 的 存储 空间 ， 各 个 存储 空间 是 完全 独立 的 , 因 | 
此 不 会 造成 数据 混乱 。 
Web Storage 的 缺陷 : 
浏览 器 不 会 检查 脚本 所 在 的 域 与 当前 域 是 否 相同 。 例 如 ， 如 果 在 域 B 中 嵌入 域 A 的 脚本 文 
件 ， 那 么 域 A 的 脚本 文件 可 以 访问 域 B 中 的 数据 。 不 过 这 个 漏洞 很 容易 修补 ， 就 看 浏览 器 
厂商 的 态度 了 。 
存储 数据 未 加 密 ， 且 永远 保存 ， 容 易 泄露 。 
在 HTML5 众多 API 中 ，Web Storage 的 浏览 器 支持 是 非常 好 的 ， 目 前 主流 浏览 器 都 支持 Web 
Storage， 如 下 8+、Firefox 3+、Opera 10.5+、Chrome 3.0+ 和 Safari 4.0+。 


6.1.1 使 用 Web Storage 


localStorage 和 sessionStorage 对 象 拥有 相同 的 属性 和 方法 ， 操 作 方 法 也 都 相同 。 
1. 存储 | 
使 用 setItem0 方 法 可 以 存储 值 ， 用 法 如 下 : 

setItem( key value) 

参数 key 表示 键 名 ，value 表示 值 ， 都 以 字符 串 形式 进行 传递 。 例 如 : 


sessionStorage.setItem("key", "value"): 
localStorage.setItem("site". "mysite.cn"): 








办 办 多 轨 








2. 访问 

使 用 getItem0 方 法 可 以 读 取 指定 键 名 的 值 ， 用 法 如 下 : 

getItem(key) 

参数 key 表示 键 名 ， 字 符 串 类 型 。 该 方法 将 获取 指定 key 本 地 存储 的 值 。 例 如 : 


Var value = sessionStorage.getItem("key"): 
Var site = localStorage.getItem("site"): 
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3. 删除 

使 用 removeItem() 方 法 可 以 删除 指定 键 名 本 地 存储 的 值 。 用 法 如 下 : 
removeltem(key) 

参数 key 表示 键 名 ， 字 符 串 类 型 。 该 方法 将 删除 指定 key 本 地 存储 的 值 。 例 如 : 


sessionStorage .removeltem("key"): 
localStorage.removeltem("site"): 


4. 清空 

使 用 clear0 方 法 可 以 清空 所 有 本 地 存储 的 键 值 对 。 用 法 如 下 : 
clear0 

例如 ， 调 用 clear0 方 法 可 以 直接 清理 本 地 存储 的 数据 。 


sessionStorage.clear(); 
localStorage.clear(): 


这 提示 : Web Storage 也 支持 使 用 点 语法 ， 或 者 使 用 字符 串 数组 [] 的 方式 来 处 理 本 地 数据 ， 例 如 : 


Var storage = WindowlocalStorage: // 获 取 本 地 localStorage 对 象 
/存储 值 

storage.key = "hello":; 

storage["key"] = "world": 

/访问 值 

console.log(storage.key): 

console.log(storage["key"]): 


5. 遍历 


Web Storage 定义 key0 方 法 和 length 属性 ， 使 用 它们 可 以 对 存储 数据 进行 遍历 操作 。 
【示例 1】 下 面 示例 获取 本 地 localStorage， 然 后 使 用 for 语句 访问 本 地 存储 的 所 有 数据 ， 并 输出 
到 调试 台 显示 。 
Var storage = window.localStorage: 
for (Var i=0, len = storage.length; i < len: i++){ 
Var key = storage.key(D): 
var value = storage.getItem(key): 
console.log(key + "=" + value): 
出 


6. 监测 事件 


Web Storage 定义 storage 事件 ， 当 键 值 改变 或 者 调用 clear0 方 法 的 时 候 ， 将 触发 storage 事件 。 
【示例 2】 下 面 示例 使 用 storage 事件 监测 本 地 存储 ， 当 发 生 值 变动 时 ， 即 时 进行 提示 。 
if(window.addEventListener){ 
window.addEventListener("storage".handle storage.false): 
jelse if(window.attachEvent) { 
window.attachEvent("onstorage".handle_ storage): 
} 
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function handle storage(e) { | 
Var logged = "key:" + ekey + ". newValue:" + e.newValue + ". oldValue:" + e.oldValue + ". url:" + eurl+", | 
storageArea:" + e.storageArea; 
alert(logged): 
] 


storage 事件 对 象 包含 属性 说 明 如 表 6.1 所 示 。 
表 6.1 storage 事件 对 象 属性 | 











属 性 | 类 型 说 明 | 
key String 键 的 名 称 | 
olavalue | Any | 以 前 的 值 被 覆盖 的 值 )， 如 果 是 新 添加 的 项 目 ， 则 为 null 

newValue Any 新 的 值 ， 如 果 是 新 添加 的 项 目 ， 则 为 null 


ui | sting | 引发 更 改 的 方法 所 在 页 面 地 址 


6.1.2 案例: 设计 登录 页 
本 例 演示 如 何 使 用 localStorage 对 象 保存 用 户 登录 信息 ， 运 行 结果 如 图 6.1 所 示 。 





视频 讲解 


四 lecalhozteesethtml | 


© | © localhost/testl.htn 





四 是 否 保存 密码 
可 录 | 取消 
| 登录 成 功 上 














6.1 保存 用 户 登 录 信息 县 本 人 用 


当 用 户 在 文本 框 中 输入 用 户 名 与 密码 ， 单 击 “ 登 录 “ 按 钮 后 ， 浏 览 器 将 调用 localStorage 对 象 保 | 
存 登 录用 户 名 。 如 果 选 中 “是 否 保存 密码 ” 复 选 框 , 会 同时 保存 密码 ,否则 ,将 清空 可 能 保存 的 密码 。 | 
当 重 新 打开 该 页 面 时 ， 经 过 保存 的 用 户 名 和 密码 数据 将 分 别 显示 在 文本 框 中 ， 避 免 用 户 重复 登录 。 
示例 代码 如 下 所 示 : 


<style type="text/css"> 
ul { list-style-type: none; padding:3px 6px: } 
ulli { margin:6px: } 
li_title { margin-top:12px:} 
.status { border: 1px solid #999999: background: #CCCCCC: padding:6px: } 
</style> 
<script type="text/javascript"> 
function $(id) { return document.getElementById(id):} 
function pageloadO{ ”// 页 面 加 载 时 调用 的 函数 
Var strName=localStorage.getItem("keyName"): 
Var strPass=localStorage.getItem("keyPass"): 
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| if(srName){ $("txtName") value=strName: } 
| if(strPass){ $("txtPass").value=strPass: } 
| 


’ 
Poe function btn_click0O{ ”// 单 击 “ 登 录 ” 按 钮 后 调用 的 函数 
仿 F | var strName=$("txtName").value: 
| Var strPass=$("txtPass") value: 
localStorage.setItem("keyName",strName): 
| if($("chkSave").checked){ localStorage.setItem("keyPass",strPass); 
| }else {localStorage.removeltem("keyPass"):} 


$("spnStatus").className="status"; 
$("spnStatus").innerHTML=" 登 录 成 功 !"; 
} 
</script> 


<body onLoad="pageload0:"> 
<form id="frmLogin" action="#"> 
<fieldset> 
<legend> 用 户 登录 </legend> 
<ul> 


| 

| 

| 

| 

| 

| 

二 

| 

| 

| 

| 

| <I 记 用 户 名 : <input id="txtName" class="inputtxt" type="text"></li> 

| <li> 密 &nbsp: 码 :<input id="txtPass" class="inputtxt" type="password"></li> 

| <li><input id="chkSave" type="checkbox"> 是 否 保存 密码 </li> 

| <li><input name="btn”class="inputbtn”value=" 登录 ”type="button"” onClick="btn_click0:"> 
| <input name="rst" class="inputbtn" type="reset" value=" 取 消 "> </li> 

| <li class="li title"><span id="spnStatus"></span></li> 

| 
| 
| 
| 
| 





</ul> 
</fieldset> 
</form> 
</body> 
4 回 
6.1.3 ”案例 : 流量 统计 
回 
视频 讲解 | 本 例 通 过 sessionStorage 和 localStorage 对 页 面 的 访问 进行 计数 。 当 在 文本 框 内 输入 数据 后 ， 分 别 
| 单 击 “session 保存 ”按钮 和 “local 保存 ”按钮 对 数据 进行 保存 ， 还 可 以 通过 单 击 “session 读 取 ” 按 
| 钮 和 “local 读 取 ”按钮 对 数据 进行 读 取 。 在 Chrome 浏览 器 中 运行 本 实例 的 结果 如 图 6.2 所 示 。 


口 sessionStorage.Slocal: x \ > 
© | © localhost/test1.html 


计数 器 


localStorage = 12345 

Storage: |12345 

session 保 存 | | session 读 取 | | local 保 存 | | local 读 取 | 

本 页 session 访 问 次 数 ， 7 ”本 页 local 访 问 次 数 ，12 








6.2 ”Web 应 用 计数 器 
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示例 代码 如 下 所 示 : 


<hl> 计 数 器 </hl> 
<p class="msg" id="msg 1"> </p> 
<p class="form item"> 
<label for="">Storage: </label> 
<input type="text" name="text-1" value="" id="text-1"/> 
</p> 开 
<p class="form item"> | 
<input type="button" name="btn-1" value="session 保存 " id="btn-1"/> | 
<input type="button" name="btn-2" value="session 读 取 " id="btn-2"/> | 
<input type="button" name="btn-3" value="local 保存 " id="btn-3"/> | 
<input type="button" name="btn-4" value= "local 读 取 " id="btn-4"/> | 
</p> | 
<p class="count_wrap"> 本 页 session 访问 次 数 : <span class="count" id='session_count></span>&nbsp:&nbsp; | 
| 
| 
| 
| 
| 





本 页 local 访问 次 数 ，<span class="count" id=-'local count></span></p> 
<script> 
function getE(ele){ ”// 自 定义 一 个 getEO 函 数 
Tetum document.getElementById(ele): /返回 并 调用 document 对 象 的 getElementById 方法 输出 变量 


} 
var text_1 = getE(text-1)./ 声 明 变 量 并 为 其 赋值 
mag = getE(msg_1'). 
btn 1= getE(btn-1"), | 
btm_2 = getE(btn-2"), | 
btm_3 = getE(btn-3)， | 
btn 4 = getE(bm-47: | 
btn 1.onclick = functionO {sessionStorage.setItem('msg'.'sessionStorage ='+ text 1.value ): } | 
btn 2.onclick = fonctionO {mag.innerHTML = SessionStorage.getItem(msg'): } 
btn_3.onclick = functionO| {localStorage.setItem(‘mseg','localStorage = "+text_1.Value );} | 
btn_4.onclick = functionO {mag.innerHTML = localStorage.getItem(‘mse’):} 
// 记 录 页 面 次 数 
Var local count = localStorage.getItem('a_count’)?localStorage.getItem('a_count’):0: 
getE(local count).innerHITML = local_ count: 
localStorage.setItem('a count'.+local count+1): 
Var session count = sessionStorage.getItem(a count)?sessionStorage.getItem('a count):0: 
getE(session_count).innerHTML = Session count: 
sessionStorage.setItem('a_count',+session count+l): 
</script> 





6.2 Web SQL Database 


HTMLS5 新 增 Web SQL Database API, 允许 用 户 使 用 SQL 访问 客户 端 数据 库 。 该 API 不 是 HTIML5 
规范 的 组 成 部 分 ， 而 是 单独 的 规范 ， 它 通过 一 套 方法 操纵 客户 端的 数据 库 。 虽 然 Web SQL Database 
已 经 在 Safari、Chrome 和 Opera 浏览 器 中 实现 ， 但 是 正 、Firefox 浏览 器 并 没有 实现 它 。 

由 于 标准 认定 直接 执行 SQL 语句 不 可 取 , Web SQL Database 已 被 新 规范 一 一 索引 数据 库 (Indexed 
Database) 所 取代 。WHATWG 也 停止 对 Web SQL Database 的 开发 。 索 引 数 据 库 更 简便 ， 而 且 不 依赖 
于 特定 的 SQL 数据 库 版 本 。 目 前 浏览 器 正在 逐步 实现 对 索引 数据 库 的 支持 。 


“149 。 





Re Se 


| 6.2.1 使 用 Web SQL Database 
| 


HTMLS5 数据 库 API 以 一 个 独立 规范 形式 出 现 ， 它 包含 三 个 核心 方法 : 
openDatabase: 使 用 现 有 数据 库 或 创建 新 数据 库 的 方式 创建 数据 库 对 象 。 


二 | 回 tansaction。 允许 我 人 根据 情况 控制 事务 提交 或 回 深 。 


executeSql: 用 于 执行 真实 的 SQL 查询 。 

| 使 用 JavaScript 脚本 编写 SQLLite 数据 库 有 两 个 必要 的 步骤 。 

回 “创建 访问 数据 库 的 对 象 。 

| 加 ”使 用 事务 处 理 。 

| 1. 创建 或 打开 数据 库 

| 首先 ， 必 须要 使 用 openDatabase 方法 来 创建 一 个 访问 数据 库 的 对 象 。 具 体 用 法 如 下 所 示 。 
| Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned 
| long estimatedSize, in optional DatabaseCallback creationCallback) 

| penDatabase 方法 可 以 打开 已 经 存在 的 数据 库 ， 如 果 不 存 在 则 创建 。openDatabase 中 五 个 参数 分 
| 别 表示 : 数据 库 名 、 版 本 号 、 描 述 、 数 据 库 大 小 、 创 建 回调 。 创 建 回调 没有 时 也 可 以 创建 数据 库 。 
【示例 1】 创 建 了 一 个 数据 库 对 象 db， 名 称 是 Todo， 版 本 编号 为 0.1。db 还 带 有 描述 信息 和 大 概 
| 的 大 小 值 。 浏 览 器 可 使 用 这 个 描述 与 用 户 进行 交流 ， 说 明 数据 库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 
| 大 小 值 ， 浏 览 器 可 以 为 内 容留 出 足够 的 存储 。 如 果 需 要 ， 这 个 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 
| 假设 允许 用 户 使 用 多 少 空间 。 

| db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000): 
| 为 了 检测 之 前 创建 的 连接 是 否 成 功 ， 可 以 检查 数据 库 对 象 是 否 为 null: 
db 

| alert("Failed to connect to database."): 

| 4 儿 注意 : 使 用 中 绝 不 可 以 假设 该 连接 已 经 成 功 建立 ， 即 使 过 去 对 于 某 个 用 户 它 是 成 功 的 。 为 什么 一 
| 个 连接 会 失败 ， 这 里 面 存在 多 个 原因 : 也 许 浏览 器 出 于 安全 原因 拒绝 访问 ， 也 许 设备 存储 
| 有 限 。 面 对 活跃 而 快速 进化 的 潜在 浏览 器 ， 对 用 户 机 器 、 软 件 及 其 能 力 做 出 假设 是 非常 不 
| 明智 的 行为 。 如 当 用 户 使 用 手持 设备 时 ， 他 们 可 自由 处 置 的 数据 可 能 只 有 几 兆 字 节 。 

| 


2. 访问 和 操作 数据 库 

实际 访问 数据 库 的 时 候 ， 还 需要 调用 transaction 方法 ， 用 来 执行 事务 处 理 。 使 用 事务 处 理 ， 可 以 
防止 在 对 数据 库 进行 访问 及 执行 有 关 操 作 的 时 候 受到 外 界 的 打扰 。 因 为 在 Web 上 ， 同 时 会 有 许多 人 
都 在 对 页 面 进行 访问 。 如 果 在 访问 数据 库 的 过 程 中 ， 正 在 操作 的 数据 被 别 的 用 户 给 修改 掉 , 会 引起 很 
多 意 想不到 的 后 果 。 因 此 ， 可 以 使 用 事务 来 达到 在 操作 完成 之 前 ， 阻 止 别 的 用 户 访问 数据 库 的 目的 。 

transaction 方法 的 使 用 方法 如 下 所 示 。 

db.transaction( function(tx) {}) 


transaction 方法 使 用 一 个 回调 函数 作为 参数 。 在 这 个 函数 中 ， 执 行 访问 数据 库 的 语句 。 
在 transaction 的 回调 函数 内 ， 使 用 了 作为 参数 传递 给 回调 函数 的 transaction 对 象 的 executeSql 方 
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法 。executeSql 方法 的 完整 定义 如 下 所 示 。 
transaction.executeSql(sqlquery.[],dataHandler errorHandler): 


该 方法 使 用 四 个 参数 ， 第 一 个 参数 为 需要 执行 的 SQL 语句 。 | 
第 二 个 参数 为 SQL 语句 中 所 有 使 用 到 的 参数 的 数组 。 在 executeSql 方法 中 ， 将 SQL 语句 中 所 要 | 
使 用 到 的 参数 先 用 “?” 代 蔡 ， 然 后 依次 将 这 些 参数 组 成 数组 放 在 第 二 个 参数 中 ， 如 下 所 示 。 | 
transaction.executeSql("UPDATE people set age-? where name=?:",[age, name]): | 
第 三 个 参数 为 执行 SQL 语句 成 功 时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 | 
function dataRandler(transaction, results){ /执行 SQL 语句 成 功 时 的 处 理 
} 
该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 查询 操作 时 返回 的 
查询 到 的 结果 数据 集 对 象 。 
第 四 个 参数 为 执行 SQL 语句 出 错时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 
function errorHandler(transaction,errmeg) { // 执 行 SQL 语句 出 错时 的 处 理 
} 
该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 发 生 错误 时 的 错误 
信息 文字 。 
【示例 2】 下 面 将 在 mydatabase 数据 库 中 创建 表 t1， 并 执行 数据 插入 操作 ， 完 成 插入 两 条 记录 。 | 
Var db = openDatabase(mydatabase''2.0. my db', 2 * 1024): 
db.transaction(function (tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS tl (id unique. log)): 


tx.executeSql('INSERT INTO t1 (id log) VALUES (1. "foobar")): 
fx.executeSql(INSERT INTO tl (id, log) VALUES (2. "logmsg")): 
































D; 

在 插入 新 记录 时 ， 还 可 以 传递 动态 值 : 
Var db = openDatabase( mydatabase '. '2.0'. ‘my db'. 2 * 1024): 
db.transaction(function (tx) { 


tx.executeSql(CREATE TABLE IF NOT EXISTS tl (id unique. log) 
tx.executeSql(INSERT INTO t1 (idlog) VALUES (?. ?'), [e_id, e log]: We id 和 e log 是 外 部 变量 





六: | 
当 执 行 查询 操作 时 ， 从 查询 到 的 结果 数据 集中 依次 把 数据 取出 到 页 面 上 来 ,最 简单 的 方法 是 使 用 | 
for 语句 循环 。 结 果 数 据 集 对 象 有 一 个 rows 属性 ， 其 中 保存 了 查询 到 的 每 条 记录 ， 记 录 的 条 数 可 以 用 | 
rows.length 来 获取 , 可 以 用 for 循环 , 用 rows[index] 或 rows.Item ((index]) 的 形式 来 依次 取出 每 条 数据 。 | 
在 JavaScript 脚本 中 , 一 般 采 用 rows[index] 的 形式 .另外 ,在 Chrome 浏览 器 中 不 支持 rows.Item ([index)) | 
的 形式 。 | 
【示例 3】 如 果 要 读 取 已 经 存在 的 记录 ， 使 用 一 个 回调 函数 来 捕获 结果 ， 并 通过 for 语句 循环 显 | 
示 每 条 记录 。 | 
Var db = openDatabase(mydatabase. '2.0. 'my db'. 2*1024): 
db.transaction(function (bo { 
tx.executeSql(CREATE TABLE IF NOT EXISTS tl (idunique log)’): 
tx.executeSql(INSERT INTO tl (id. log) VALUES (1. "foobar")’): 


“Ws 


gm A 


| tx.executeSql(INSERT INTO tl (id log) VALUES (2. "logmse")’): 
| D; 
| db.transaction(function (tx) { 
| fx.executeSql(SELECT * FROM tL' []. function (tx, results) { 
仿 F | var len = results.rows.length, i: 
ed | msg = "<p>Found rows: " + len + "</p>"; 
document.querySelector('#status'").innerHIML += msg: 
forG=0:i<len: i++H){ 
alert(results.rows.item(i).log ): 





} 
}, nulD): 
DD; 
【示例 4】 下 面 示例 将 完整 地 演示 Web SQL Database API 的 使 用 ， 包 括 建立 数据 库 、 建 立 表格 、 
| 插入 数据 、 查 询 数据 、 将 查询 结果 显示 。 在 Chrome、Safari 或 Opera 浏览 器 中 输出 结果 如 图 6.3 所 示 。 
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完成 消息 创建 和 插入 行 操作 
查询 行 数 : 2 


foobar 


logmsg 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 图 6.3 创建 本 地 数据 库 
| 示例 代码 如 下 所 示 : 
| <script type="text/javascript"> 
| Var db = openDatabase('mydb', '1.0', "Test DB', 2 * 1024 * 1024): 
va 
| db.transaction(function(tx) { 
| tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique. log)): 
| tx.executeSql(INSERT INTO LOGS (id log) VALUES (1, "foobar")’): 
| tx.executeSql(INSERT INTO LOGS (id. log) VALUES (2. "logmsg")'): 
| msg ='<p> 完 成 消息 创建 和 插入 行 操作 。</p>": 
| document.querySelector('#status").innerHTML = msg: 
| Da 
| db.transaction(function(tx) { 
| tx.executeSql('SELECT * FROM LOGS'. []. function(tx. results) { 
| Var len = results.rows.length, i; 
| msg = "<p> 查 询 行 数 : "+ len + "</p>"; 
| document.querySelector(#status').innerHTML += msg: 
| for(i=0:i<len: i { 
| Imsg= "<p><b>" + results rows.item(i) .log + "</b></p>": 
| document.querySelector('#status'").innerHTML += msg: 
| 
| 
| 
| 
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<div id="status" name="status"></div> | 
其 中 第 二 行 的 “var db = openDatabase(mydb', '1.0', "Test DB', 2 * 1024 * 1024):” 建 立 一 个 名 称 为 | 


mydb 的 数据 库 ， 它 的 版 本 为 0， 描述 信息 为 Test DB， 大 小 为 2MB。 可 以 看 到 此 时 有 数据 库 建立 ，| 
但 并 无 表格 建立 ， 如 图 6.4 所 示 。 | 





echoxnerihm x 


© | © localnost/testi ntml 


充 成 消息 创建 和 插入 行 操作 。 





图 6.4 创建 数据 库 mydb 


openDatabase 方法 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 则 创建 数据 库 ， 创 建 数据 库 包 
括 数据 库 名 、 版 本 号 、 描 述 、 数 据 库 大 小 、 创 建 回 调 函 数 。 最 后 一 个 参数 创建 回调 函数 ， 在 创建 数据 
库 的 时 候 调用 ， 但 即使 没有 这 个 参数 ， 一 样 可 以 运行 时 创建 数据 库 。 
第 四 行 到 第 十 行 代码 : 
db.transaction(function(tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log)): 
tx.executeSql(INSERT INTO LOGS (id, log) VALUES (1, "foobar")’): 
tx.executeSql(INSERT INTO LOGS (id log) VALUES (2. "logmsg")): 
msg ='<p> 完 成 消息 创建 和 插入 行 操作 。</p>': 
document.querySelector(#status').innerHTML = msg: 
D: 
通过 第 五 行 语句 可 以 在 mydb 数据 库 中 建立 一 个 LOGS 表格 。 在 这 里 只 执行 创建 表格 语句 , 而 不 
执行 后 面 两 个 插入 操作 时 ， 在 Chrome 浏览 器 中 可 以 看 到 在 数据 库 mydb 中 有 表格 LOGS 建立 , 但 表 
格 LOGS 为 空 。 
第 六 、 七 两 行 执行 插入 操作 ， 在 插入 新 记录 时 ， 还 可 以 传递 动态 值 : 
var db = openDatabase(‘mydb', '1.0", "Test DB'. 2 * 1024 * 1024): 
db.transaction(function (tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique. log)): | 
tx.executeSql(INSERT INTO LOGS (idlog) VALUES (2. 2). [e_ id e log]: | 
| 





D: 
这 里 的 e id 和 e_log 为 外 部 变量 ，executeSql 在 数组 参数 中 将 每 个 变量 映射 到 “?”。 在 插入 操 | 
作 执行 后 ， 可 以 在 Chrome 浏览 器 中 看 到 数据 库 的 状态 ， 可 以 看 到 插入 的 数据 ， 此 时 并 未 执行 查询 语 | 
句 ， 页 面 中 并 没有 出 现 查询 结果 ， 如 图 6.5 所 示 。 
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图 6.5 创建 数据 表 并 插入 数据 
如 果 要 读 取 已 经 存在 的 记录 ， 使 用 一 个 回调 函数 捕获 结果 ， 如 上 面 的 第 十 一 到 第 二 十 一 行 代码 : 
db.transaction(function(tx) { 
tx.executeSql('SELECT * FROM LOGS'. []. function(tx. results) { 
Var len = results.rows.length, i; 
msg = "<p> 查 询 行 数 : " + len + "</p>"; 
document.querySelector('#status').innerHTML += msg: 
for(i=0;i<len;,irn) { 
msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
document.querySelector('#status').innerHTML += msg: 
} 
外 nulD: 
D; 
执行 查询 之 后 ， 将 信息 输出 到 页 面 中 ， 可 以 看 到 页 面 中 显示 查询 结果 。 


< 人 注意 : 如 果 不 需 要 ， 不 要 使 用 Web SQL Database， 因 为 它 会 让 代码 更 加 复杂 ( 匿名 内 部 类 的 内 
部 函数 、 回 调 函 数 等 )。 在 大 多 数 情况 下 ， 本 地 存储 或 会 话 存储 就 能 够 完成 相应 的 任务 ， 
尤其 是 能 够 保持 对 象 状 态 持久 化 的 情况 。 通 过 这 些 HTML5 Web SQL Database API 接口 ， 
可 以 获得 更 多 功能 , 相信 以 后 会 出 现 一 些 非常 优秀 的 、 建 立 在 这 些 API 之 上 的 应 用 程序 。 


6.2.2 案例: 设计 登录 页 


运行 结果 如 图 6.6 所 示 。 





示例 效果 图 6.6 用 户 登录 
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在 浏览 器 中 访问 页 面 ， 然 后 在 表单 中 输入 用 户 名 和 密码 ， 单 击 “ 登 录 ” 按 钮 ， 登 录 成 功 后 ， 用户 | 
名 、 密 码 以 及 登录 时 间 将 显示 在 页 面 上 。 单 击 “ 注 销 ” 按 钮 ， 将 清除 已 经 登录 的 用 户 名 、 密 码 以 及 登 
录 时 间 。 

示例 代码 如 下 所 示 : 

<style type="text/css"> 

body { font-size: 14px:; width: 80%; margin: 6px auto: } 

input[type="text"], input[type="password"]{ width: 180px: height: 24px: line-height: 24px: } 

input[type="submit"], input[type="button"] { width: 80px: height: 24px: line-height: 24px: border: lpx solid 
#ff6600: border-radius: 4px: background: #ff6600: outline: none: color: #ffF: cursor: pointer: margin-top: 6px: } 

Pp{margin:6px;} 

</style> 











<form action="#" method="get" accept-charset="utf-8"> 
<h1> 用 户 登 录 </hl> 
<p> 用 户 名 : <input type="text" name="" value="" id="name" required /></p> 
<p> 密 &nbsp: 码 : <input type="password" name="" value="" id="msg" required /></p> 
<p><input type="submit" id="save" value=" 登 录 "/> 
<input type="submit" id="clear" value=" 注 销 "/></p> 
</form> 
<script> 
Var datalist = getE('datalist): 
if(!datalist){ 
datalist = document.createElement('dl"): 
datalist.className = "datalist’; 
datalist.id = 'datalist'; 
document.body.appendChild(datalist); 
} 
Var result = getE('result’): 
Var db = openDatabase(‘myData'.'1.0','test database’,1024*1024): 
showAllData0: 
db.transaction(function(tx){ 
tx.executeSql(CREATE TABLE IF NOT EXISTS MseData(name TEXT.msg TEXT.time INTEGER)'.[]): 
») 
getE('clear’).onclick = functionO{ 
db.transaction(function(tx){ 
tx.executeSql(DROP TABLE MsgData'.[]): 
D) 
showAllData0 
getE('save').onclick = functionO{ 
saveData(): 
Tetum false: 
} 
function getE(ele) {retum document.getElementById(ele):} 
function removeAllDataO{ 
for (var i = datalist.children.length-1: i >= 0: i--){ 
datalist.removeChild(datalist.children[i]): 
} 
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function showData(row){ 
Var dt = document.createElement('dt'): 
dt.innerHTML = row.name: 
Var dd = document.createElement('dd): 
dd.innerHTML = ITow.msg: 
Vartt= document.createElement('tt): 
var t= new Date0: 
t.setTime(row.time): 
tt.innerHTML =ttoLocaleDateString0+" "+ ttoLocaleTimeStringO: 
datalistappendChild(db: 
datalistappendChild(dd): 
datalist.appendChild(tt); 


function showAllDataO{ 
db.transaction(function(tx){ 
tx.executeSql(CREATE TABLE IF NOT EXISTS MsgData(name TEXT.msg TEXT.time INTEGER)'.[]); 
tx.executeSql(SELECT * FROM MsgData',[],function(tx,resul) { 
IemoveAllData0: 
for(var i=0; i < result.rows.length; i++){ 
showData(result.rows.item(2)): 
} 
D): 
})); 
} 
function addData(name.msg,time){ 
db.transaction(function(tx){ 
tx.executeSql(INSERT INTO MsgData VALUES(?.?,?)'.[name.msg,.time],function(tx.result) { 
alert(" 登 录 成 功 "); 
} 
function(tx,erron) { 
alert(error.source + ':' + erTor.message): 
D; 
D: 
} 
function saveDataO{ 
Var name =getE(Cname').value: 
Var msg = getE('msg').value: 
Var time = new DateO0.getTimeO: 
addData(name.msg.time): 
showAllData0: 


| 6.2.3 案例: 设计 留言 板 


【示例 1】 下 面 示例 设计 一 个 简单 Web 留言 本 ， 介 绍 如 何 使 用 Web Storage 来 读 写 留言 信息 。 在 
示例 页 面 中 显示 一 个 多 行文 本 框 ， 人 允许 用 户 输入 数据 ， 当 单 击 “ 追 加 ”按钮 时 ， 将 文本 框 中 的 数据 保 
存 到 localStorage 中 ,在 表单 下 面 显示 一 个 空 的 p 元 素 , 作为 数据 容器 动态 显示 用 户 添加 的 留言 信息 ， 
| 示例 效果 如 图 6.7 所 示 。 
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图 6.7 使 用 localStorage 存储 数据 的 Web 留言 本 示例 效果 


实现 本 例 的 关键 是 如 何 获取 localStorage 中 的 所 有 数据 。 获 取 localStorage 中 全 部 数据 的 时 候 ， 需 
要 用 到 localStorage 对 象 的 两 个 比较 重要 的 属性 。 
length: 所 有 保存 在 localStorage 中 的 数据 的 条 数 。 
key(index): 将 想 要 得 到 数据 的 索引 号 作为 index 参数 传 入 ， 可 以 得 到 localStorage 中 与 这 个 
索引 号 对 应 的 数据 。 


容 提示 :Web Storage 采用 键 值 对 的 形式 保存 数据 ， 将 文本 框 的 内 容 作为 值 ， 保 存 时 间作 为 键 ， 以 
时 间 鹤 的 形式 保存 ， 可 以 避免 重复 的 键 名 。 

示例 完整 代码 如 下 所 示 : 

<script type="text/javascript"> 

function saveStorage(id){ 
Var data = document.getElementById(id).value: 
Var time = new Date().getTime():; 
localStorage.setItem(time.data): 
alert(" 数 据 已 保存 。"); 
loadStorage(msg ): 


} 
function loadStorage(id){ 
Var result = "<table border="1">"; 
for(var i= 0:i < localStorage.length:i++) { | 
Var key = localStorage.key(D): | 
var value = localStorage.getItem(key): 
Var date = new DateO: 
date.setTime(key): 
Var datestr = datetoGMTStringO: 
Tesult += "<tr><td>' + Value + '</td><td>' + datestr + '</td></tr>"; 
} 
Tesult += "</table>"; 
var target = document.getElementById(id): 
targetinnerHTML = result: 





} 
function clearStorageO{ 
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| localStorage.clearO): 
| alert(" 全 部 数据 被 清除 。"): 
| loadStorage(msg): 
} 


会 办 | /scrip 


<h1>Web 留言 本 </h1l> 
<textarea id="memo" cols="60" rows="10"></textarea><br> 
| <input type="button" value=" 追 加 "onclick="saveStorage(memo):"> 
| <input type="button" value=" 初 始 化 " onclick="clearStorage(msg'):"><hr> 
| 人 imse'><lp> 
| 在 该 页 面 中 , 除了 输入 数据 用 的 文本 框 与 显示 数据 用 的 p 元 素 之 外 , 还 放置 了 “追加 ”按钮 和 “ 初 
| 始 化 ”按钮 ， 单 击 “ 追 加 ”按钮 来 保存 数据 ， 单 击 “ 初 始 化 ”按钮 来 消除 全 部 数据 。 
在 JavaScript 脚本 部 分 包含 三 个 函数 : saveStorage0、loadStorage0、clearStorage0， 简 单 说 明 如 下 。 
saveStorage0 〇 函数 : 这 个 函数 比较 简单 ， 使 用 new Date0.getTimeO 语 句 得 到 了 当前 的 日 期 和 
时 间 ， 然 后 调用 localStorage.setItem0 方 法 ， 将 得 到 的 时 间作 为 键 值 ， 并 将 文本 框 中 的 数据 
作为 键 名 进行 保存 。 保 存 完毕 后 ， 重 新 调用 脚本 中 的 loadStorage0 函 数 在 页 面 上 重新 显示 保 
存 后 的 数据 。 
loalStorage0 函 数 : 取得 保存 后 的 所 有 数据 ， 然 后 以 表格 的 形式 进行 显示 。 取 得 全 部 数据 的 
时 候 ， 需 要 用 到 localStorage 两 个 比较 重要 的 属性 。 
> ”localStorage.length 返回 所 有 保存 在 localStorage 中 的 数据 的 条 数 。 
> ”localStorage.key(index) 将 想 要 得 到 数据 的 索引 号 作为 index 参数 传 入 ， 可 以 得 到 
localStorage 中 与 这 个 索引 号 对 应 的 数据 。 如 想得到 第 6 条 数据 , 传 入 的 index 为 5 (index 
是 从 0 开始 计算 的 ) 。 
先 用 localStorage .length 属性 获取 保存 数据 的 条 数 ， 然 后 做 一 个 循环 , 在 循环 内 用 一 个 变量 ， 
从 0 开始 将 该 变量 作为 index 参数 传 入 localStorage.key(index) 属 性 , 每 次 循环 时 该 变量 加 1， 
通过 这 种 方法 取得 保存 在 localStorage 中 的 所 有 数据 。 
加 ”clearStorage0 函 数 : 将 localStorage 中 保存 的 数据 全 部 清除 ， 在 这 个 函数 中 只 有 一 句 语句 
“localStorage.clear0;” 调 用 localStorage 的 clear(0 方 法 时 ,所 有 保存 在 localStorage 中 的 数据 
会 全 部 被 清除 。 
【示例 2】 下 面 示 例 借助 JSON 格式 数据 ， 协 助 Web Storage 实现 保存 二 维 表格 式 数据 ， 本 示例 
| 演示 效果 如 图 6.8 所 示 。 
示例 代码 如 下 所 示 : 
<script type="text/javascript"> 
| function saveStorageO{ 
| Var data = new Object: 
| data.name = document.getElementById(‘name'").value: 
| data.email = document.getElementByYId(Cemail) .value: 
data.tel = document.getElementById('tel’).value: 
data.memo = document.getElementById(‘memo").value: 
var str = JSON.stringify(data): 
localStorage.setItem(data.name.str): 
alert(" 数 据 已 保存 。"); 
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| 
function findStorage(id){ ! 
var find = document.getElementById(find’).value: | 
var str = localStorage.getItem(find): | 
var data= JSON.parse(str): | 
Varresult= "姓名 : "+ data.name + '<br>"; | 
Tesult += "EMAIL: " + data.email + '<br>' | 
Tesult+= "电话 号 码 : "+ data.tel +'<br>'; 
Tesult += "备注 : "+ data.memo + '<br>'; 
Var target = document.getElementById(id); 
target.innerHTML = result: 





} 
</script> 


<h1> 使 用 Web Storage 模拟 数据 库 </h1> 
<table> 
<tr><td> 姓 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td>EMAIL:</td><td><input type="text" id="email"></td></tr> 
<tr><td> 电 话 号 码 :</td><td><input type="text" id="tel"></td></tr> 
<tr><td> 备 注 :</td><td><input type="text" id="memo"></td></tr> 
<t> 
<td></td> 
<td><input type="button" value=" 保 存 " onclick="saveStorage0:"></td> 
</t> 
</table><hr> 
<p> 检 索 :<input type="text" id="find"> 
<input type="button" value=" 检 索 " onclick="findStorage(msg”):"> 


<Ip> 
<p id="msg"></p> 


DD localhostinden2.html x N=“ 


加 | @ localhost/index2. hb 


使 用 Web Storage 模 拟 数据 库 


姓名 ; 。 医 四 
EMAIL Sn 
电话 号 码 : 22222222 








效果 


或 者 把 数据 字符 串 转换 为 JSON 对 象 。 


次 提示 : 支持 JSON 对 象 的 浏览 器 包括 正 8+、Firefox 3.6H、Chrome +、Safari 5+、Opera 10+ 版 本 
的 浏览 器 。 
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在 JavaScript 脚本 部 分 包含 两 个 函数 ， 分 别 是 保存 数据 用 的 saveStorage0 函 数 与 检索 数据 用 的 
findStorage( 〇 函数 。 

saveStorage0 函 数 中 的 流程 如 下 : 

第 1 步 ， 从 各 输入 文本 框 中 获取 数据 。 

第 2 步 ， 创 建 对 象 ， 将 获取 的 数据 作为 对 象 的 属性 进行 保存 。 

第 3 步 ， 将 对 象 转换 成 JSON 格式 的 文本 数据 。 

第 4 步 ， 将 文本 数据 保存 在 localStorage 中 。 

为 了 将 数据 保存 在 一 个 对 象 中 , 使 用 new Object 语句 创建 了 一 个 对 象 , 将 各 种 数据 保存 在 该 对 象 
的 各 个 属性 中 ， 然 后 ， 为 了 将 对 象 转换 成 JSON 格式 的 文本 数据 ， 使 用 了 JSON 对 象 stringify0 方 法 ， 
该 方法 的 使 用 方法 如 下 所 示 。 

Var str = JSON. stringify(data): 


该 方法 接收 一 个 参数 data， 它 表示 要 转换 成 JSON 格式 文本 数据 的 对 象 ， 这 个 方法 的 作用 是 将 对 
象 转换 成 JSON 格式 的 文本 数据 ， 并 将 其 返回 。 

findStorage0 〇 函数 中 的 流程 如 下 : 

第 1 步 ， 在 localStorage 中 将 检索 用 的 姓名 作为 键 值 ， 获 取 对 应 的 数据 。 

第 2 步 ， 将 获取 的 数据 转换 成 JSON 对 象 。 

第 3 步 ， 取 得 JSON 对 象 的 各 属性 值 ， 创 建 要 输出 的 内 容 。 

第 4 步 ， 将 要 输出 的 内 容 在 页 面 上 输出 。 

该 函数 的 关键 是 使 用 JSON 对 象 的 parse 方法 ,将 从 localStorage 中 获取 的 数据 转换 成 JSON 对 象 。 
该 方法 的 使 用 方法 如 下 所 示 。 

var data = JSON.parse(str); 


该 方法 接收 一 个 参数 str， 它 表示 从 localStorage 中 取得 的 数据 ， 该 方法 的 作用 是 将 传 入 的 数据 转 
换 成 JSON 对 象 ， 并 且 将 该 对 象 返 回 。 

【示例 3】 下 面 示例 利用 Web SQL 数据 库 实现 留言 本 的 功能 。 设 计 页 面 中 包含 一 个 输入 姓名 用 
的 文本 框 ， 一 个 输入 留言 用 的 文本 框 ， 以 及 一 个 保存 数据 时 用 的 按钮 。 在 按钮 下 面 放置 了 一 个 表格 ， 
保存 数据 后 从 数据 库 中 重新 取得 所 有 数据 ， 然 后 把 数据 显示 在 这 个 表格 中 。 

单 击 “ 保 存 ” 按 钮 时 ， 调 用 saveData0 函 数 ， 保 存 数据 时 的 处 理 都 被 写 在 了 这 个 函数 里 。 打 开 页 
面 时 将 调用 init0 函 数 ， 将 数据 库 中 全 部 已 保存 的 留言 信息 显示 在 表格 中 ， 示 例 演示 效果 如 图 6.9 所 示 。 


© | @ localhost/indexAhtml 


使 用 Web SQL 设 计 Web 留 言 本 


























图 6.9 使 用 Web SQL 设计 Web 留言 本 
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示例 代码 如 下 所 示 : 


<script type="text/javascript"> 
Var datatable = null: 
Var db = openDatabase(MyData', ". "My Database'. 102400): 
function initO{ 
datatable = document.getElementById("datatable"): 
showAllData0: Note 











9 
function removeAllDataO{ 
for (var i =datatable.childNodes.length-1:; i>=0; i--){ 
datatable.removeChild(datatable.childNodes[i]): 
} 
Var tr = documentcreateElement('tr): 
var thl = document.createElement('th"); 
Var th2 = document.createElement('th"): 
Var th3 = document.createElement('th"); 
也 1.innerHTML = ' 姓 名 ': 
th2.innerHTML = ' 留 言 ': 
了 h3.innerHTML = ' 时 间 ': 
tr.appendChild(th1); 
tr.appendChild(th2): 
tr.appendChild(th3); 
datatable.appendChild(tr): 


} 
function showData(row) { 
Var tr = document.createElement('tr’): 
vartdl = document.createElement('td'): 
tdl.innerHTML = row.name; 
var td2 = document.createElement('td'): 
td2.innerHTML = row.message: 
Var td3 = document.createElement('td"): 
var t= new Date(): 
t.setTime(row.time): 
td3.innerHTML=ttoLocaleDateStringO+" "+t.toLocaleTimeString(); 
tr.appendChild(td1): 
tr.appendChild(td2): 
tr.appendChild(td3): 
datatable.appendChild(tr): 
} 
function showAllDataO{ 
db.transaction(function(tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS MseData(name TEXT. message TEXT time 
INTEGER)'.DD: 
tx.executeSql(SELECT * FROM MsgData'. []. function(tx. rs) { 
removeAllData|: 
for(var i= 0: i<Is.rows.length: 1++){ 
showData(rs.rows.item(i)): 
由 
Dy 


入: 
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} 
function addData(name. message. time) { 
db.transaction(function(tx) { 
tx.executeSql(INSERT INTO MsgData VALUES(?. ?, ?).[name. message, time],function(tx, rs) 
alert(" 成 功 保存 数 据 !"); 
5 
function(tx, error) { 
alert(error.source + "::" + error.message); 
D; 
D); 
} 
function saveData0{ 


var name = document.getElementById('name’).value: 
var memo = document.getElementById(Cmemo).value: 
var time = new Date(.getTime():; 
addData(name.memo.time): 
showAllData0): 

} 

</script> 


<body onload="init0:"> 
<hl> 使 用 Web SQL 设计 Web 留言 本 </h1> 
<table> 





<tr> 
<td></td> 
<td><input type="button" value=" 保 存 " onclick="saveData0;"></td></tr> 
</table><hr> 
<table id="datatable" border="1"></table> 


<p id="msg"></p> 
下 面 重点 分 析 JavaScript 脚本 部 分 。 

打开 数据 库 

打开 数据 库 的 代码 如 下 所 示 。 

var datatable = null: 

Var db = openDatabase(MyData', "My Database’. 102400): 

在 JavaScript 脚本 一 开始 ， 使 用 了 一 个 变量 datatable。 用 这 个 变量 来 代表 页 面 中 的 table 元 素 。db 


| 变量 代表 使 用 openDatabase0 方 法 创建 的 数据 库 访问 对 象 。 在 示例 中 创建 了 MyData 数据 库 并 对 其 进 


行 访问 。 

回 “初始 化 

编写 init0 函 数 ， 该 函数 在 页 面 打 开 时 调用 。 为 了 在 打开 页 面 时 就 往 页 面 表格 中 装 入 数据 ， 在 该 
函数 中 首先 设 定 变量 datatable 为 页 面 中 的 表格 , 然后 调用 脚本 中 另 一 个 函数 showAllData0 来 显示 数据 。 

回 “清除 表格 中 当前 显示 的 数据 

removeAllData 函数 是 在 showAllData0 函 数 中 被 调用 的 一 个 必 不 可 少 的 函数 ， 它 的 作用 是 将 页 面 
中 table 元 素 下 的 子 元 素 全 部 清除 ， 只 留 下 一 个 空 表 格 框架 ， 然 后 输入 表 头 。 这 样 在 页 面 表格 中 当前 
显示 的 数据 就 全 部 被 清除 了 ， 以 便 重 新 读 取 数据 并 装 入 表格 。 
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showData0 函 数 使 用 一 个 row 参数 ， 该 参数 表示 从 数据 库 中 读 取 到 的 一 行 数据 。 该 函数 在 页 面 表 | 
格 中 使 用 tr 元 素 添加 一 行 ， 并 使 用 td 元 素 添加 各 列 ， 然 后 将 传 入 的 这 行 数据 分 别 填 入 在 表格 中 添加 | 
的 这 一 行 对 应 的 各 列 中 。 | 
回 “显示 全 部 数据 | 
showAllData0 函 数 使 用 transaction0 方 法 ， 在 该 方法 的 回调 函数 中 执行 executeSgl(0 方 法 获取 全 部 
数据 。 获 取 到 数据 之 后 ， 首 先 调用 removeAllData0 函 数 初 始 化 页 面 表格 ， 将 该 表格 中 当前 显示 的 数据 | 
全 部 清除 ， 然 后 在 循环 中 调用 showData0 函 数 ， 将 获取 到 的 每 一 条 数据 作为 参数 传 入 ， 在 页 面 上 的 表 | 
格 中 逐条 显示 获取 到 的 每 条 数据 。 
追加 数据 | 
addData0 函 数 在 saveData0 函 数 中 被 调用 。 在 addData0 函 数 中 ,使 用 transaction0 方 法 , 在 该 方法 | 
的 回调 函数 中 执行 executeSgl 方法 ， 将 作为 参数 传 入 进来 的 数据 保存 在 数据 库 中 。 
保存 数据 
saveData0 函 数 先 调用 addData0 函 数 追 加 数据 ， 再 调用 showAllData0 函 数 重新 显示 表格 中 的 全 部 | 
数据 。 





6.3 IndexedDB 


与 Web SQL Database 不 同 ，indexedDB 是 对 象 型 数据 库 。 与 Web Storage 和 文件 系统 API 一 样 ， 
indexedDB 数据 库 的 作用 域 也 被 限制 在 包含 它 的 文档 源 中 : 两 个 同 源 的 Web 页 面 可 以 互相 访问 对 方 的 
数据 ， 但 是 非 同 源 的 页 面 则 不 行 。 

在 mdexedDB API 中 ， 一 个 数据 库 其 实 就 是 一 个 命名 的 对 象 仓库 的 集合 。 每 个 对 象 都 必须 有 一 个 
键 (key)， 通 过 该 键 实现 在 存储 区 内 进行 该 对 象 的 存储 和 获取 。 键 必须 是 唯一 的 ， 同 一 个 存储 区 中 的 
两 个 对 象 不 能 有 同样 的 键 ， 并 且 它 们 必须 按照 自然 顺序 存储 ， 以 便 查 询 。 

目前 ，Chrome 11+、Firefox 4+、Opera 18+、Safari 8+ 以 及 IE10+ 版 本 的 浏览 器 都 支持 IndexedDB 
API。 


6.3.1 建立 连接 


IndexedDB API 操作 步骤 如 下 所 示 : 

第 1 步 ， 通 过 指定 名 字 打开 indexedDB 数据 库 。 

第 2 步 ， 创 建 一 个 事务 对 象 ， 使 用 该 对 象 在 数据 库 中 通过 指定 名 字 查 询 对 象 存储 区 。 

第 3 步 ， 调 用 对 象 存储 区 的 get0 方 法 来 查询 对 象 ， 或 者 调用 put() 方 法 来 存储 新 的 对 象 。 

如 果 要 避免 覆盖 已 存在 对 象 的 情况 ， 可 以 调用 add0 方 法 。 | 

如 果 想 要 查询 表示 键 值 范 围 的 对 象 ， 创 建 一 个 IDBRange 对 象 ， 并 将 其 传递 给 对 象 仓库 的 | 
openCursor0 方 法 。 

如 果 想 要 使 用 次 键 进行 查询 的 话 , 查询 对 象 仓库 中 的 命名 索引 , 然后 调用 索引 对 象 上 的 get0 方 法 | 
或 者 openCursor0 方 法 。 

使 用 indexedDB 数据 库 时 ， 首 先 需要 预定 义 indexedDB 数据 库 、 该 数据 库 所 用 的 事务 、 
IDBKeyRange 对 象 和 游标 对 象 。 为 了 能 够 在 各 浏览 器 中 正常 运行 ， 可 以 按 如 下 代码 针对 各 浏览 器 统 | 
一 进行 定义 。 
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ee 
window.indexedDB = window.indexedDB || window.webkitIndexedDB | 
window.mozIndexedDB || window.msIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction | 


windowmsIDBTransaction 
全 window.IDBKeyRange = windowIDBKeyRangel| window.webkitIDBKeyRange || 
Te windowmsIDBKeyRange: 
Note window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 


【示例 】 使 用 indexedDB 数据 库 的 时 候 , 首先 需要 连接 某 个 indexedDB 数据 库 。 下 面 示例 代码 演 
| 示 了 如 何 连 接 到 indexedDB 数据 库 。 
<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || windowmsIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction:; 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
function connectDatabaseO{ 
var dbName = 'indexedDBTest;// 数 据 库 名 
Var dbVersion =20170603: /版 本 号 
Var idb: 
人 # 连 接 数 据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
//e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
idb = €.target.result; 


alert( 数 据 库 连 接 成 功 ); 
}; 
dbConnect.onerror = function(O){ 
alert( 数 据 库 连接 失败 ); 
}; 
} 


<input type="button" value=" 连 接 数 据 库 " onclick="connectDatabase0:"/> 





T 


在 浏览 器 中 预览 ， 单 击 “ 连 接 数 据 库 ”按钮 ， 可 以 连接 到 indexedDBTest 数据 库 ， 效 果 如 图 6.10 


DD localhost/testihtml x 


CG © localhost/testi.htm 六 
[连接 数据 库 
localhost 呈 示 : 


数 扣 这 过 捷 或 功 
侍 止 此 页 再 显示 对 话 竹 。 








| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| </script> 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 图 6.10 连接 到 数据 库 
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在 上 面 示例 代码 中 ， 首 先 使 用 indexedDB.open() 方 法 连接 数据 库 。 该 方法 包含 两 个 参数 ， 其 中 第 | 
一 个 参数 值 为 一 个 字符 串 ， 代 表 数 据 库 名 ; 第 二 个 参数 值 为 一 个 无 符号 长 整 型 数值 ， 代 表 数 据 库 的 版 | 
本 号 。indexedDB.open() 方 法 返回 一 个 IDBOpenDBRequest 对 象 ， 代 表 一 个 请 求 连接 数据 库 的 请 求 | 
对 象 。 | 
然后 , 通过 监听 数据 库 连接 的 请 求 对 象 的 onsuccess 事件 和 onerror 事件 来 定义 数据 库 连接 成 功 时 | 
与 数据 库 连接 失败 时 所 需 执行 的 事件 处 理 函 数 。 
在 连接 成 功 的 事件 处 理 函 数 中 , 取得 事件 对 象 的 etargetresult 属性 值 , 该 属性 值 为 一 个 IDBDatabase | 
对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 。 | 


竣 提示 : 在 Firefox 浏览 器 中 访问 示例 页 面 ， 需 要 将 示例 页 面 放置 在 虚拟 服务 器 运行 环境 。 


在 IndexedDB API 中 ,可 以 通过 indexedDB 数据 库 对 象 的 close0 方 法 关闭 数据 库 连接 ， 代 码 如 下 | 
所 示 : 








idb.closeO: 
当 数 据 库 连接 被 关闭 后 ， 不 能 继续 执行 任何 对 该 数据 库 进 行 的 操作 ， 和 否则 浏览 器 均 抛 出 异常 。 
6.3.2 更 新 版 本 





成 功 连 接 数 据 库 之 后 ， 还 不 能 执行 任何 数据 操作 ， 用 户 还 应 该 创建 对 象 仓库 ， 以 及 用 于 检索 数据 
的 索引 。 这 里 的 对 象 仓库 相当 于 关系 型 数据 库 中 的 数据 表 。 
在 indexedDB 数据 库 中 ， 所 有 数据 操作 都 必须 在 一 个 事务 内 部 执行 。 事 务 分 为 三 种 ， 只 读 事务 、| 
读 写 事务 和 版 本 更 新 事务 。 | 
对 于 创建 对 象 仓库 和 索引 的 操作 ， 只 能 在 版 本 更 新 事务 内 部 进行 ， 因 为 在 indexedDB API 中 不 允 
许 数据 库 中 的 数据 仓库 在 同一 个 版 本 中 发 生变 化 ， 所 以 当 创 建 或 删除 数据 仓库 时 ， 必 须 使 用 新 的 版 本 
号 来 更 新 数据 库 的 版 本 ， 以 避免 重复 修改 数据 库 结构 。 
对 于 数据 库 的 版 本 更 新 处 理 ， 在 HIML5 中 包括 2011 年 12 月 之 前 和 2011 年 12 月 之 后 两 种 不 同 
的 版 本 , 在 Chrome 10 一 22 版 中 使 用 2011 年 12 月 之 前 的 版 本 , 在 Firefox 4+、Chrome 23+、Opera 18+、 
Safari 8 和 本 10+ 版 本 的 浏览 器 中 使 用 2011 年 12 月 之 后 的 版 本 。 
【示例 】 下 面 示例 只 针对 2011 年 12 月 之 后 的 版 本 进行 演示 介绍 。 
<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || windowmsIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction: | 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
function VersionUpdateO{ 
var dbName = 'indexedDBTest'; // 数 据 库 名 
Var dbVersion = 20170603: /版 本 号 
var idb: 
/# 连 接 数 据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName, dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
//e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
idb = e.target.result: 
alert( 数 据 库 连 接 成 功 "): 
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dbConnect.onerror = fonction0O{ 
alert( 数 据 库 连 接 失 败 "): 
于 
dbConnect.onuperadeneeded = function(e){ 
仿 F | /| 数据库 版 本 更 新 
~ | //e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 


idb = e.target.result: 
| /*e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 */ 
| var 攻 =etargettransaction: 
| Var oldVersion = e.oldVersion: // 更 新 前 的 版 本 号 
Var newVersion = e.newVersion; /更 新 前 的 版 本 号 
alert( 数 据 库 版 本 更 新 成 功 , 旧 的 版 本 号 为 +oldVersion+', 新 的 版 本 号 为 +newVersion): 


} 
</script> 


<input type="button" value=" 更 新 数据 库 版 本 " onclick="VersionUpdateO:"/> 


上 面 代码 监听 数据 库 连接 的 请 求 对 象 的 onupgradeneeded 事件 ， 当 连接 数据 库 时 发 现 指定 的 版 本 
号 大 于 数据 库 当 前 版 本 号 时 将 触发 该 事件 ， 当 该 事件 被 触发 时 一 个 数据 库 的 版 本 更 新 事务 已 经 被 开 
| 启 ， 同 时 数据 库 的 版 本 号 已 经 被 自动 更 新 完毕 ， 并 且 指 定 在 该 事件 触发 时 所 执行 的 处 理 ， 该 事件 处 理 
| 函数 就 是 版 本 更 新 事务 的 回调 函数 。 

在 浏览 器 中 预览 页 面 ， 单 击 页 面 中 的 “更 新 数据 库 版 本 ”按钮 ， 将 弹出 提示 信息 ， 提 示 用 户 数据 
库 版 本 更 新 成 功 ， 如 图 6.11 所 示 。 









四 - 

[locanoreort hi x 

C | @ localnosvresri hrm 玄 藉 
更 寄 康 据 血 忌 本 
localhost 明示 
确定 
i 二 宙 玫 加 图 6.11 更 新 数据 库 版 本 
6.3.3 ”新 建仓 库 

回 | 
视频 讲解 | 针对 indexedDB API 中 的 版 本 更 新 处 理 ,在 Chrome 10 一 22 版 本 的 浏览 器 中 使 用 2011 年 12 月 之 


| 前 的 版 本 ， 在 Chrome 23+、Opera 18+、IE 10+、Firefox 4+ 和 Safari 8+ 版 本 的 浏览 器 中 均 使 用 2011 年 
| A A y a 
| 12 月 之 后 的 版 本 ， 下 面 示例 针对 第 二 种 版 本 介绍 如 何 创建 对 象 仓库 。 

| pe 

| window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ‖ windowmsIndexedDB: 

| window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction: 
| window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 

| window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
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入 了 
function CreateObjectStoreO{ 
var dbName = 'indexedDBTest'; /数据 库 名 
var dbVersion = 20170305; // 版 本 号 
var idb: 
族 连 接 数 据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
Var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
/le.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
idb = etargetIesult: 
alert( 数 据 库 连 接 成 功 ); 
dbConnect.onerror = function() falert( 数 据 库 连接 失败 ?7: }; 
dbConnect.onupgradeneeded = function(e){ 
/数据 库 版 本 更 新 
/etargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
idb = etargetIesult: 
/*e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 */ 
Var tx = €.target.transaction; 
Var name = "Users'; 
Var optionalParameters = { 
keyPath: "userId', 
autoIncrement: false 
上 
Var store = idb.createObjectStore(name, optionalParameters): 
alert( 对 象 仓库 创建 成 功 ); 
上 
上 
</script> 


<input type="button" value=" 创 建 对 象 仓库 " onclick="CreateObjectStore0:" 亡 


上 面 代码 监听 数据 库 连接 的 请 求 对 象 的 onupgradeneeded 事件 ， 并 且 指 定 在 该 事件 触发 时 调用 数 | 


据 库 对 象 的 createObjectStore() 方 法 创建 对 象 仓库 。 








createObjectStore() 方 法 包含 两 个 参数 : 第 一 个 参数 值 为 一 个 字符 串 ， 代 表 对 象 仓库 名 ;第 二 个 参 | 
数 为 可 选 参数 optionalParameters， 参 数值 为 一 个 JavaScript 对 象 ， 该 对 象 的 keyPath 属性 值 用 于 指定 | 


对 象 仓库 中 的 每 一 条 记录 使 用 哪个 属性 值 来 作为 该 记录 的 主键 值 。 


一 条 记录 的 主键 为 数据 仓库 中 该 记录 的 唯一 标识 符 , 在 一 个 对 象 仓 库 中 只 能 有 一 个 主键 , 但 是 主 | 
键 值 可 以 重复 ， 相 当 于 关系 型 数据 库 中 数据 表 的 id 字段 为 数据 表 的 主键 ， 多 条 记录 的 id 字段 值 可 以 | 


重复 ， 除 非 将 主键 指定 为 唯一 主键 。 


在 indexedDB API 中 ， 对 象 仓 库 中 的 每 一 条 记录 均 为 具有 一 个 或 多 个 属性 值 的 一 个 对 象 ， 而 | 





keyPath 属性 值 用 于 指定 每 一 条 记录 使 用 哪个 属性 值 作为 该 记录 的 主键 值 。 例 如 ， 在 这 里 将 数据 记录 | 
的 userId 属性 值 作为 每 条 记录 的 主键 值 , 相当 于 在 关系 型 数据 库 中 将 每 条 记录 的 userId 字段 值 指定 为 | 


该 记录 的 主键 值 。 


在 这 种 情况 下 , 因为 主键 存在 于 每 条 记录 内 部 , 所 以 被 称 为 内 联 主键 , 如 果 在 这 里 不 指定 keyPath | 
属性 值 ， 或 将 其 指定 为 noll， 每 条 记录 的 主键 将 通过 其 他 途径 被 另行 指定 ， 这 时 因为 数据 记录 的 主键 | 





存在 于 每 条 记录 之 外 ， 所 以 被 称 为 外 部 主键 。 


optionalParameters 对 象 的 autoincrement 属性 值 为 tue, 相当 于 在 关系 型 数据 库 中 将 主键 指定 为 自 | 
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| 
SI 

增 主键 ,如 果 添加 数据 记录 时 不 指定 主键 值 ， 则 在 数据 仓库 内 部 将 自动 指定 该 主键 值 为 既 存 的 最 大 主 
键 值 +1。 也 可 以 在 添加 数据 记录 时 显 式 地 指定 主键 值 。 如 果 将 optionalParameters 对 象 的 autoIncrement 
属性 值 指定 为 flse， 则 必须 在 添加 数据 记录 时 显 式 地 指定 主键 值 。 

人 | createObjectStore0 方 法 返回 一 个 IDBObjectStore 对 象 ， 该 对 象 代表 被 创建 成 功 的 对 象 仓库 。 

在 Chrome 浏览 器 中 打开 示例 页 面 ， 单 击 页 面 中 的 “创建 对 象 仓库 ”按钮 ， 弹 出 提示 信息 ， 提 示 
用 户 users 对 象 仓库 创建 成 功 ， 如 图 6.12 所 示 。 








四 -= 


DD localhosthestihtml x 
© | © oainostnest heml 全 | 


[ER 


localhost 显示 


人 





示例 效果 6.12 ”创建 对 象 仓库 成 功 
| 6.3.4 新建 索 引 


indexedDB 数据 库 中 的 索引 类 似 于 关系 型 数据 库 中 的 索引 ， 需 要 通过 数据 记录 对 象 的 某 个 属性 值 
来 创建 。 在 indexedDB 数据 库 中 创建 索引 之 后 , 可 以 提高 在 对 数据 仓库 中 的 所 有 数据 记录 进行 检索 时 
的 性 能 。 
在 关系 型 数据 库 中 ， 可 以 针对 非 索引 字段 进行 检索 ， 而 在 indexedDB 数据 库 中 ， 只 能 针对 被 设 为 
索引 的 属性 值 进行 检索 。 
针对 indexedDB API 中 的 版 本 更 新 处 理 ， 分 为 在 Chrome 18 一 22 版 本 的 浏览 器 中 使 用 的 2011 年 
12 月 之 前 的 版 本 ， 在 Chrome 23+、Opera 18+、IE 10+、Firefox 4+ 和 Safari 8+ 版 本 的 浏览 器 中 使 用 的 
2011 年 12 月 之 后 的 版 本 。 
【示例 】 下 面 示例 只 针对 第 二 种 版 本 进行 介绍 。 在 indexedDB 数据 库 中 ,不 能 重复 创建 同名 的 对 
象 仓库 ， 所 以 在 本 示例 中 将 对 象 仓 库 名 修改 为 newUsers， 避 免 在 运行 完 上 节 示 例 之 后 继续 运行 代码 
时 浏览 器 抛 出 异常。 
<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitDBCursor || window.msIDBCursor: 
function CreateIndexO{ 
var dbName = "indexedDBTest': // 数 据 库 名 
var dbVersion = 20150306: // 版 本 号 
var idb: 
人 # 连 接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连 接 的 请 求 对 象 */ 
Var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
/le.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
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idb = etargetIesult 

alert( 数据库 连接 成 功 ): 
» 
dbConnect.onerror = functionO{ 

alert( 数 据 库 连接 失败 ); 
二 
dbConnect.onupgradeneeded = function(e){ 

/| 数据 库 版 本 更 新 

//e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 

idb = etargetIesult: 

/*e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 */ 

Var tx = €.target.transaction: 

var name = ‘newUsers'; 

Var optionalParameters = { 

keyPath: "userId'、 
autoIncrement: false 

上 

Var store = idb.createObjectStore(name, optionalParameters): 

alert( 对 象 仓库 创建 成 功 ); 

var name = "userNameIndex': 

Var keyPath = "userName'’; 

Var optionalParameters = { 


unique: false. 
multiEntry: false 
上 
Var idx = store.createIndex(name., keyPath. optionalParameters): 
alert( 索 引 创建 成 功 ): 
上 
} 
</script> 


<input type="button" value=" 创 建 索引 "onclick="CreateIndexO:"/> 


在 数据 库 的 版 本 更 新 事务 中 ， 在 对 象 仓库 创建 成 功 后 ， 调 用 对 象 仓库 的 createIndex() 方 法 创建 索 | 


也 


。 该 方法 包含 三 个 参数 : 
第 一 个 参数 值 为 一 个 字符 串 ， 代 表 索 引 名 。 


第 二 个 参数 值 代表 使 用 数据 仓库 中 数据 记录 对 象 的 哪个 属性 来 创建 索引 。 在 本 示例 代码 中 , 虽然 | 
索引 名 与 用 于 创建 索引 的 属性 名 不 同 ， 但 是 实际 上 此 处 索引 名 与 属性 名 也 可 以 相同 ， 例 如 ， 此 处 可 以 | 


将 索引 名 定义 为 userName。 








第 三 个 参数 optionalParameters 为 可 选 参数 , 参数 值 为 一 个 JavaScript 对 象 , 该 对 象 的 unique 属性 | 
值 的 作用 相当 于 关系 型 数据 库 中 索引 的 unique 属性 值 的 作用 。 属性 值 为 tue, 代表 同一 个 对 象 仓库 中 | 


两 条 数据 记录 的 索引 属性 值 〈 即 userName 属性 值 》 不 能 相同 ， 否 则 在 向 数据 仓库 中 添加 第 二 条 数据 | 


记录 时 将 导致 添加 失败 。 


optionalParameters 对 象 的 multiEntry 属性 值 为 tue, 代表 当 数 据 记 录 的 索引 属性 值 为 一 个 数组 时 ， | 
可 以 将 数组 中 的 每 个 元 素 添加 在 索引 中 ; multiEntry 属性 值 为 false， 代 表 只 能 将 该 数组 整体 添加 在 索 | 


引 中 。 
createIndex() 方 法 返回 一 个 IDBIndex 对 象 ， 代 表 创 建 索引 成 功 。 
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在 Chrome 浏览 器 中 打开 示例 页 面 ， 单 击 页 面 中 的 “创建 索引 ”按钮 ， 弹 出 提示 信息 ， 提 示 用 户 


| 索引 创建 成 功 ， 如 图 6.13 所 示 。 
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图 613 创建 索引 成 功 
6.3.5 ”使 用 事务 


在 indexedDB API 中 ， 所 有 针对 数据 的 操作 都 只 能 在 一 个 事务 中 被 执行 。indexedDB 提供 三 类 事 
务 模式 ， 简 单 说 明 如 下 : 
readonly: 只 读 。 提 供 对 某 个 对 象 存储 的 只 读 访问 ， 在 查询 对 象 存 储 时 使 用 。 
回 readwrite: 读 写 。 提 供 对 某 个 对 象 存储 的 读 取 和 写 入 访问 权 。 
加 ”versionchange: 数据 库 版 本 更 新 。 提 供 读 取 和 写 入 访问 权 来 修改 对 象 存储 定义 ， 或 者 创建 一 

个 新 的 对 象 存储 。 

默认 的 事务 模式 为 readonly。 用 户 可 在 任何 给 定时 刻 内 打开 多 个 并 发 的 readonly 事务 ， 但 只 能 
打开 一 个 readwrite 事务 。 出 于 此 原因 ， 只 有 在 数据 更 新 时 才 考 虑 使 用 readwrite 事务 。 单 独 的 ( 表 
示 不 能 打开 任何 其 他 并 发 事务 ) versionchange 事务 操作 一 个 数据 库 或 对 象 存 储 。 可 以 在 
onupgradeneeded 事件 处 理 函 数 中 使 用 versionchange 事务 创建 、 修 改 或 删除 一 个 对 象 仓 库 ， 或 者 将 

-个 索引 添加 到 对 象 仓库 。 

在 indexedDB API 中 ， 使 用 某 个 已 建立 连接 的 数据 库 对 象 的 transaction0 方 法 可 以 开启 事务 。 例 
如 ， 要 在 readwrite 模式 下 为 employees 对 象 仓库 创建 一 个 事务 : 

Var transaction = db.transaction("employees", "readwrite"): 

transaction0 方 法 包含 两 个 参数 : 

第 一 个 参数 为 由 一 些 对 象 仓库 名 组 成 的 一 个 字符 串 数组 , 用 于 定义 事务 的 作用 范围 , 即 限定 

当 事 务 中 的 数据 存 取 操 作 只 针对 某 个 对 象 仓 库 进 行 时 该 事务 中 所 运行 的 读 写 操作 只 能 针对 
哪些 对 象 仓 库 进 行 。 
安 提示 : 如果 不 想 限定 事务 只 针对 哪些 对 象 仓库 进行 ， 那 么 可 以 使 用 数据 库 的 objectStoreNames 属 
性 值 来 作为 transaction 方法 的 第 一 个 参数 值 ， 代 码 如 下 所 示 : 
var transaction = db.transaction(idb.objectStoreNames. "Teadwrite"): 

数据 仓库 的 objectStoreNames 属性 值 为 由 该 数据 库 中 所 有 对 象 仓库 名 构成 的 数组 ， 在 将 其 作为 
transaction() 方 法 的 第 一 个 参数 值 时 ， 可 以 针对 数据 库 中 任何 一 个 对 象 仓库 进行 数据 的 存 取 操作 。 

第 二 个 参数 为 可 选 参数 , 用 于 定义 事务 的 读 写 模式 , 即 指定 事务 为 只 读 事务 , 还 是 读 写 事务 。 


图 回 加 
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transaction() 方 法 返回 一 个 IDBTransaction 对 象 ， 代 表 被 开启 的 事务 。 


< 注意 : 在 将 数据 库 的 objectStoreNames 属性 值 作为 transaction() 方 法 的 第 一 个 参数 值 ， 将 | 
"Teadwrite" 常 量 值 作为 transaction() 方 法 的 第 二 个 参数 值 ， 运 行 transaction() 方 法 之 后 ， 虽 | 
然 在 接 下 来 的 代码 中 可 以 不 必 再 注意 事务 针对 哪些 对 象 仓库 进行 ， 以 及 事务 为 只 读 事务 
还 是 读 写 事务 ， 但 是 这 种 做 法 将 对 事务 在 运行 时 的 性 能 产生 很 大 的 不 利 影响 。 考 虑 到 运 | 
行 时 的 性 能 ， 建 议 应 该 正确 指定 事务 的 作用 范围 ， 以 及 事务 的 读 写 模式 。 


| 

会 提示 : 在 indexedDB API 中 ， 可 以 同时 运行 多 个 作用 范围 不 重 登 的 读 写 事务 ， 如 果 数 据 库 中 存在 | 

storeA 和 storeB 两 个 对 象 仓库 ,事务 A 的 作用 范围 为 storeA, 事 务 B 的 作用 范围 为 storeB， | 

那么 可 以 同时 运行 事务 A 和 事务 B。 如 果 将 事务 A 的 作用 范围 修改 为 同时 包括 storeA 和 | 

storeB 两 个 对 象 仓库 ， 且 先 运行 事务 A， 那 么 事务 B 必须 等 到 事务 A 运行 结束 后 才能 运 | 

行 。 即 使 事务 A 为 只 读 事务 ， 仍 然 可 以 同时 运行 事务 A 和 事务 B。 

在 indexedDB API 中 ， 用 于 开启 事务 的 transaction0 方 法 必须 被 书写 到 某 一 个 函数 中 ， 而 且 该 事 | 

务 将 在 函数 结束 时 被 自动 提交 ， 所 以 不 需要 显 式 调用 事务 的 commit0 方 法 来 提交 事务 , 但 是 可 以 在 需 | 

要 的 时 候 显 式 调用 事务 的 abort0 方 法 来 中 止 事务 。 

可 以 通过 监听 事务 对 象 的 oncomplete 事件 (事务 结束 时 触发 ) 和 onabort 事件 (事务 中 止 时 触发 )， 

并 定义 事件 处 理 函 数 来 定义 事务 结束 或 中 止 时 所 要 执行 的 处 理 。 例 如 : 








Var transaction = db.transaction(idb.objectStoreNames. "readwrite"): 
transaction.oncomplete = function(event){ /事务 结束 时 所 要 执行 的 处 理 
} 

transaction.onabort = function(event) { // 事 务 中 止 时 所 要 执行 的 处 理 





} 
// 事 务 中 的 处 理 内 容 
transaction.abortO: // 中 止 事务 
6.3.6 ”保存 数据 
本 节 介 绍 如 何在 indexedDB 数据 库 的 对 象 仓库 中 保存 数据 ， 示 例 代 码 如 下 所 示 。 | 提 频 讲解 
<script> 


Window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ‖ windowmsIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
function SaveDataO{ 
var dbName = 'indexedDBTest': // 数 据 库 名 
var dbVersion = 20170306: // 版 本 号 
Var idb: 
/# 连 接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
idb =etargetresult /引用 IDBDatabase 对 象 
var 区 =idb.transaction([users']."readwrite"): /开启 事务 
Var store = tx.objectStore('users"): 
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2 
console.log(store); //-> {IDBObjectStore} 
var value = { 
userld: 1, 
userName: ' 张 三 
address: "北京 


req.onsuccess = function(e){ alert(" 数 据 保存 成 功 "):}; 
req.onerror = function(e){ alert(" 数 据 保存 失败 "): }; 
a = function( {alert( 数 据 库 连接 失败 "):}: 
ee 
<input type="button" value=" 保 存 数据 " onclick="SaveData0:"/> 


【代码 解析 】 
第 1 步 , 为 了 保存 数据 首先 需要 连接 某 个 indexedDB 数据 库 ， 并 且 在 连接 成 功 后 使 用 该 数据 库 
对 象 的 transaction() 方 法 开启 一 个 事务 。 
第 2 步 ， 使 用 transaction0 方 法 返回 的 被 开启 的 事务 对 象 的 objectStore0 方 法 获取 该 事务 对 象 的 作 
用 范围 中 的 某 个 对 象 仓库 。 
Var store = tx.objectStore('users'): 


该 方法 包含 一 个 参数 ， 参 数值 为 所 需 获 取 的 对 象 仓库 的 名 称 。 该 方法 返回 一 个 IDBObjectStore 对 
象 ， 代 表 获 取 成 功 的 对 象 仓库 。 
第 3 步 ， 使 用 该 对 象 仓库 的 put0 方 法 向 数据 库 发 出 保存 数据 到 对 象 仓库 中 的 请 求 。 
var value= { 
userld: 1, 
userName: 张 三 '， 
address: "北京 " 






要 
Var req = store.put(value): 

在 上 面 代码 中 ，put0 方 法 使 用 一 个 参数 ， 参 数值 为 一 个 需要 被 保存 到 对 象 仓库 中 的 对 象 。putO 
方法 返回 一 个 IDBRequest 对 象 ， 代 表 一 个 向 数据 库 发 出 的 请 求 。 

第 4 步 ， 该 请 求 发 出 后 将 被 立即 异步 执行 ， 可 以 通过 监听 请 求 对 象 的 onsuccess 事件 (请 求 被 执 














| 行 成 功 时 触发 ) 和 请 求 对 象 的 onerror 事件 〈 请 求 被 执行 失败 时 触发 )， 并 指定 事件 处 理 函 数 来 定义 请 
| 求 被 执行 成 功 或 被 执行 失败 时 所 要 进行 的 处 理 。 


req.onsuccess = function(e){ 

alert(" 数 据 保存 成 功 "): 
上 
req.onerror = function(e){ 

alert(" 数 据 保存 失败 "): 

上 

根据 对 象 仓库 的 主键 是 内 联 主键 , 还 是 外 部 主键 , 主键 是 否 被 指定 为 自 增 主键 , 对象 仓 库 的 putO 
方法 的 第 一 个 参数 值 的 指定 方法 也 各 不 相同 ， 具 体 指定 方法 如 下 所 示 : 
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// 主 键 为 自 增 、 内 联 主 键 时 不 需要 指定 主键 值 
store.put({ userName: ' 张 三 '. address: ' 北 京 ' }); 
// 主 键 为 内 联 、 非 自 增 主 键 时 需要 指定 主键 值 
store.put( {userId: 1, userName: ' 张 三 ', address: ' 北 京 ' ): 
// 主 键 为 外 部 主键 时 ， 需 要 另行 指定 主键 值 ， 此 处 主键 值 为 1 
store.put({ userName: 张 三 ' address: 北京 ' }. 1 ); 


当主 键 为 自 增 、 内 联 主键 时 不 需要 指定 主键 值 ， 当 主键 为 外 部 主键 时 , 可 以 将 主键 值 指定 为 put0 | 
方法 的 第 二 个 参数 值 。 | 


次 提示 : 在 indexedDB API 中 ， 对 象 仓库 还 有 一 个 add0 方 法 ， 该 方法 的 使 用 方法 与 作用 类 似 于 对 | 
象 仓库 的 put0 方 法 。 区 别 在 于 当 使 用 put0 方 法 保存 数据 时 ， 如 果 指 定 的 主键 值 在 对 象 仓 | 
库 中 已 存在 ,那么 该 主键 值 所 在 数据 被 更 新 为 使 用 put0 方 法 所 保存 的 数据 ,而 在 使 用 add() | 
方法 保存 数据 时 ， 如 果 指定 的 主键 值 在 对 象 仓库 中 已 存在 ,那么 保存 失败 。 因 此 ， 当 出 于 | 
某 些 原因 只 能 向 对 象 仓库 中 追加 数据 ， 而 不 能 更 新 原 有 数据 时 ， 建 议 使 用 add0 方 法 ,而 | 
put0 方 法 在 其 他 场合 使 用 。 


6.3.7 ”访问 数据 


本 节 介 绍 如 何 从 indexedDB 数据 库 的 对 象 仓库 中 获取 数据 。 示 例 完整 代码 如 下 所 示 : 
<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 
window.IDBTransaction = window.IDBTransaction || window.webkitIDB Transaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
function GetData){ 
var dbName = 'indexedDBTest: // 数 据 库 名 
Var dbVersion = 20170306: /版 本 号 
Var idb: 
上 # 连 接 数 据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName, dbVersion); 
dbConnect.onsuccess = function(e){// 连 接 成 功 
idb =e.target.result; // 引 用 IDBDatabase 对 象 
var tx = idb.transaction(['"Users']."readonly"): 
Var store = tx.objectStore("Users"): 
Var req = store.get(1); 
req.onsuccess = functionO{ 
ifthisresult 一 undefined){ alert(" 没 有 符合 条 件 的 数据 "): } 
else{ alert(" 获 取 数 据 成 功 .用 户 名 为 "+this.result.userName): } 
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) 
req.onerror = function0 {alert(" 获 取 数据 失败 "): } | 
} | 
dbConnect.onerror = function() {alert( 数 据 库 连接 失败 "); }; | 
} 
</scrip> 


<input type="button" value=" 获 取 数 据 " onclick="GetData0:"/> 
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| 【代码 解析 】 
第 1 步 ， 连 接 某 个 indexedDB 数据 库 ， 并 且 在 连接 成 功 后 使 用 该 数据 库 对 象 的 transaction0 方 法 
| 开启 一 个 只 读 事 务 ， 同 时 使 用 transaction() 方 法 返回 的 被 开启 的 事务 对 象 的 objectStore() 方 法 获取 该 事 
畏 内 | 务 对 象 的 作用 范围 中 的 某 个 对 象 仓库 。 
| 第 2 步 ， 在 获取 仓库 成 功 后 ， 可 以 使 用 对 象 仓库 的 get0 方 法 从 对 象 仓库 中 获取 一 条 数据 。 
从 提示 : get0 方 法 包含 一 个 参数 ， 代 表 所 需 获取 数据 的 主键 值 ，get0 方 法 返回 一 个 IDBRequest 对 
| 象 ， 代 表 向 数据 库 发 出 的 获取 数据 的 请 求 。 
| 第 3 步 ， 该 请 求 发 出 后 将 被 立即 异步 执行 ， 可 以 通过 监听 请 求 对 象 的 onsuccess 事件 (请 求 执行 
| 成功 时 触发 ) 和 请 求 对 象 的 onerror 事件 (请 求 执行 失败 时 触发 )， 并 指定 事件 处 理 函数 来 定义 请 求 被 
| 执行 成 功 或 失败 时 所 要 进行 的 处 理 。 
| 第 4 步 , 在 获取 对 象 的 请 求 执行 成 功 后 ,如 果 没 有 获取 到 符合 条 件 的 数据 ， 此 处 该 数据 的 主键 值 
| 为 1, 那么 该 请 求 对 象 的 result 属性 值 为 undefined, 如 果 获取 到 符合 条 件 的 数据 ,那么 请 求 对 象 的 result 
| 属性 值 为 获取 到 的 数据 记录 。 在 本 示例 中 ,指定 没有 获取 到 主键 值 为 1 的 数据 会 弹出 提示 信息 框 ， 提 
示 用 户 没有 获取 到 该 数据 记录 ， 否 则 在 弹出 提示 信息 框 中 显示 该 数据 的 userName (用 户 名 ) 属性 值 。 


| 6.3.8 ”访问 键 什 


| 

| 

| 

| 

| 

| 

| 

| “通过 对 象 仓库 或 索引 的 get0 方 法 ,只 能 获取 到 一 条 数据 。 在 需要 通过 某 个 检索 条 件 来 检索 一 批 数 
| 据 时 ， 需 要 使 用 indexedDB API 中 的 游标 。 

| 下 面 示例 设计 根据 数据 记录 的 主键 值 检索 数据 ， 示 例 完整 代码 如 下 所 示 。 
| 

| 

| 

| 

| 

| 

| 

| 

| 





<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || windowmsIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor' 
var dbName = 'indexedDBTest'; /数据库 名 
Var dbVersion = 20170306: // 版 本 号 
Var idb: 
function window_onloadO{ 
document.getElementById("btnSaveData").disabled=true: 
document.getElementById("btnSearchData").disabled=true: 
} 
function ConnectDataBaseO{ 
必 连 接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
| var dbConnect = indexedDB.open(dbName. dbVersion): 
| dbConnect.onsuccess = function(e){// 连 接 成 功 
| idb =etargetresult: /引用 IDBDatabase 对 象 
| alert( 数 据 库 连接 成 功 ); 
document.getElementById("btnSaveData").disabled=false: 
E 
dbConnect.onerror = functionO{falert( 数 据 库 连接 失败 7: 上 
} 
function SaveDataO{ 
var tx = idb.transaction(["Users']."readwrite"): /开启 事务 
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Nd 
长 .oncomplete = function() falert(' 保 存 数据 成 功 ):document getElementById("btnSearchData").disabled= false:} 
tx.onabort = function0 falert(' 保 存 数据 失败 7; } 
Var store 三 区 .ObjectStore(Users'): 
var value={ 
userld: 1, 
userName: ' 甲 | 
address: 北京 ' Note 








下 
store.put(value); 
varvalue={ 
userld: 2, 
UseIName: ' 乙 ", 
address: ' 上 海 ' 
}; 
store.put(value); 
value={ 
Userld: 3, 
userName: ' 丙 '， 
address: 广州" 
}; 
Store.put(value); 
value={ 
UserId: 4, 
UserName: JT", 
address: 深圳 
}; 
store.put(value); 
} 
function SearchData0{ 
var tx = idb.transaction(["Users'],"readonly"): 
Var store = tx.objectStore("Users'): 
Var range = IDBKeyRange.bound(1.4); 
Var direction = "next"; 
Var req = store.openCursor(range,. direction): 
req.onsuccess = functionO{ 
Var cursor = this.result: 
iflcurson){ 
alert( 检 索 到 一 条 数据 ， 用 户 名 为 '+cursor.value.userName); 
cursor.continue(); // 继 续 检索 
}else{ alert( 检 索 结束 "): } 
} 
req.onerror = function0 {alert(' 检 索 数 据 失败 "): } 
} 
</script> 


<body onload="window_onloadO"> 

<input id="btnConnectDataBase" type="button" value=" 连 接 数 据 库 " onclick="ConnectDataBase0:"/> 
<input id="btnSaveData” type="button" value=" 保 存 数 据 " onclick="SaveData0:"/> 

<input id="btnSearchData" type="button" value=" 检 索 数 据 " onclick="SearchData0:"/> 

</body> 
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| be 
| 代码 解析 
| 本 示例 页 面 中 有 三 个 按钮 ， 分 别 为 “连接 数据 库 ?“ 保 存 数据 ”“ 检 索 数 据 ” 按 钮 。 在 页 面 打 开 时 
| 通过 window.onload 事件 函数 指定 “保存 数据 ”和 “检索 数据 ”按钮 为 无 效 状 态 。 

仿 站 | 用 户 单 击 “ 连 接 数据 库 ” 按钮 时 执行 ConnectDataBase0 函 数 ， 在 该 函数 中 连接 数据 库 ， 在 数据 库 

” ”| 连接 成 功 后 设 定 “保存 数据 ”按钮 为 有 效 状 态 。 用 户 单 击 “ 保 存 数据 ”按钮 后 会 在 Users 对 象 仓库 中 
保存 4 条 数据 ， 数 据 保 存 成 功 后 设 定 “ 检 索 数据 ”按钮 为 有 效 状态 。 

| 用 户 单 击 “ 检 索 数据 ”按钮 后 ， 执 行 SearchData0 函 数 。 在 该 函数 中 ， 通 过 游标 来 检索 主键 值 为 
| 1 一 4 的 数据 ， 并 将 检索 到 数据 的 userName (用 户 名 ) 属性 值 显示 在 弹出 的 提示 信息 窗口 中 。 
| 在 SearchData0 函 数 中 使 用 当前 连接 的 数据 库 对 象 的 transaction0 方 法 开启 一 个 只 读 事务 , 并 且 使 
”用 transaction0 方 法 返回 的 被 开启 的 事务 对 象 的 objectStore() 方 法 获取 Users 对 象 仓库 。 
| 然后 ， 通 过 对 象 仓库 的 openCursor0 方 法 创建 并 打开 一 个 游标 ， 该 方法 有 两 个 参数 ， 其 中 第 一 个 
| 参数 为 一 个 IDBKeyRange 对 象 。 第 二 个 参数 direction 用 于 指定 游标 的 读 取 方向 ， 参 数值 为 一 个 在 
| indexedDB API 中 预定 义 的 常量 值 。 
| openCursor() 方 法 返回 一 个 IDBRequest 对 象 ， 代 表 一 个 向 数据 库 发 出 的 检索 数据 的 请 求 。 














| 

| 

| 

| 

| 

| 调用 该 方法 后 立即 异步 执行 ， 可 以 通过 监听 请 求 对 象 的 onsuccess 事件 (检索 数据 的 请 求 执 行 成 
| 功 时 触发 )， 以 及 请 求 对 象 的 onerror 事件 〈 检 索 数 据 的 请 求 执行 失败 时 触发 )， 并 指定 事件 处 理 函数 
| 来 指定 检索 数据 成 功 与 失败 时 所 执行 的 处 理 。 

| 在 检索 成 功 后 ， 如 果 不 存在 符合 检索 条 件 的 数据 ， 那 么 请 求 对 象 的 result 属性 值 为 null 或 
| undefined， 检 索 终 止 。 可 通过 判断 该 属性 值 是 否 为 null 或 undefined 来 判断 检索 是 否 终 止 并 指定 检索 
| 终止 时 的 处 理 。 

| 如 果 存 在 符合 检索 条 件 的 数据 ， 那 么 请 求 对 象 的 result 属性 值 为 一 个 IDBCursorWithValue 对 象 ， 

| 该 对 象 的 key 属性 值 中 保存 了 游标 中 当前 指向 的 数据 记录 的 主键 值 ， 该 对 象 的 value 属性 值 为 一 个 对 
| 象 ， 代 表 该 数据 记录 。 可 通过 访问 该 对 象 的 各 个 属性 值 来 获取 数据 记录 的 对 应 属性 值 。 

| 当 存 在 符合 检索 条 件 的 数据 时 ， 可 通过 IDBCursorWithValue 对 象 的 update 方法 更 新 该 条 数据 。 

| 可 通过 IDBCursorWithValue 对 象 的 delete0 方 法 删除 该 条 数据 。 

| 当 存 在 符合 检索 条 件 的 数据 时 ， 可 通过 IDBCursorWithValue 对 象 的 continue0 方 法 读 取 游 标 中 的 
| 下 一 条 数据 记录 。 

当 游 标 中 的 下 一 条 数据 记录 不 存在 时 , 请 求 对 象 的 result 属性 值 变 为 null 或 undefined, 检索 终止。 
| 
| 
| 


| 6.3.9 访问 属性 


| 在 indexedDB API 中 ， 可 以 将 对 象 仓库 的 索引 属性 值 作为 检索 条 件 来 检索 数据 。 下面 看 一 个 完整 

| 示例: 

| <script> 

| Window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ‖ windowmsIndexedDB: 

| window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction:; 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || windowmsIDBKeyRange: 

| window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 

| var dbName ='indexedDBTest: /数据库 名 

| var dbVersion = 20170306: // 版 本 号 

| 

| 





var idb: 
function window_onloadO{ 
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SI 
document.getElementById("binSaveData").disabled=true: 
document.getElementById("binSearchData").disabled=true: 

} 
function ConnectDataBaseO{ 
人 # 连 接 数 据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
Var dbConnect = indexedDB.open(dbName, dbVersion): 
dbConnect.onsuccess = function(e){// 连 接 成 功 
idb = e.target.result; /引用 IDBDatabase 对 象 
alert( 数据库 连接 成 功 ): 
document.getElementById("btnSaveData").disabled=false: 
}; 
dbConnect.onerror = functionO{ 
alert( 数 据 库 连 接 失 败 ); 
}; 
} 
function SaveDataO{ 
// 开 启事 务 
Var tx = idb.transaction(['newUsers'],"readwrite"): 
tx.oncomplete = functionO{ 
alert(' 保 存 数据 成 功 ): 
document.getElementById("btnSearchData").disabled=false; 
} 
tx.onabort = function0 {alert(' 保 存 数 据 失败 "): } 
Var store = tx.objectStore('newUsers'): 
var value = { 
userld: 1, 
userName: ' 甲 ', 
address: "北京 " 
| 
store.put(value); 
var value={ 
userld: 2, 
UserName: ' 乙 ", 
address: ' 上 海 ' 
上 
store.put(value): 


上 

store.put(value): 

value={ 
userld: 4. 
userName: "JT. 
address: ' 深 圳 ' 


}; 
store.put(value): 
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gm FUrrsst6sss wy 到 靖 道 (术科 靖 交 厂 ) 
记忆 
| function SearchDataO{ 
| // 开 启事 务 
| var tx =idb.transaction(['newUsers'],"readonly"): 
| Var store = tx.objectStore(‘newUsers"): 
全 | var idx = store index(‘userNameIndex'): 
S| var range = IDBKeyRange.bound(' 甲 "J"): 
ee 
| Var req = idx.openCursor(range, direction): 
| Teq.onsuccess = functionO{ 
Var cursor = this.result: 
这 curson{ 
alert( 检 索 到 一 条 数据 ,用 户 名 为 '+cursor.value.userName); 
cursor.continue(); // 继 续 检索 
}else{ alert( 检 索 结束 ): } 
了 
Ieqonerror=function0{ alert( 检索 数 据 失 败 ): } 
} 
</script> 
<body onload="window_onloadO"> 
<input id="btnConnectDataBase" type="button" value=" 连 接 数 据 库 " onclick="ConnectDataBase0:"/> 
<input id="btnSaveData” type="button" value=" 保 存 数据 " onclick="SaveData0:"/> 
<input id="btnSearchData" type="button" value=" 检 索 数据 " onclick="SearchData0:"/> 
</body> 

在 示例 页 面 中 共有 三 个 按钮 ， 分 别 为 “连接 数据 库 ”“ 保 存 数据 "检索 数据 ”按钮 。 在 页 面 打开 
时 通过 window.onload 事件 处 理 函 数 指定 “保存 数据 ”和 “检索 数据 ”按钮 为 无 效 状态 ， 在 单 击 “ 连 
接 数 据 库 ” 按 钮 时 执行 ConnectDataBase() 函 数 , 在 该 函数 中 连接 数据 库 , 连接 成 功 后 设 定 “ 保 存 数据 ” 
按钮 为 有 效 状 态 。 单 击 “ 保存 数据 ”按钮 后 在 Usersl 对 象 仓库 中 保存 4 条 数据 ,这 4 条 数据 的 userName 
属性 值 分 别 为 “ 甲 "“ 乙 ”两 ”“ 丁 ”。 保 存 成 功 后 设 定 “检索 数据 ”按钮 为 有 效 状态 。 

单 击 “ 检 索 数 据 ” 按 钮 后 执行 SearchData0 函 数 。 在 该 函数 中 ， 通 过 游标 来 检索 userNameIndex 
索引 所 使 用 的 userName 属性 值 为 “ 甲 ”“ 丁 ”的 数据 ， 并 将 检索 到 数据 的 userName 用户 名 ) 属性 
值 显 示 在 弹出 的 提示 信息 窗口 中 。 

在 SearchData0 函 数 中 ， 使 用 当前 连接 的 数据 库 对 象 的 transaction() 方 法 开启 一 个 只 读 事务 ， 并 且 
使 用 transaction() 方 法 返回 的 被 开启 的 事务 对 象 的 objectStore0 方 法 获取 newUsers 对 象 仓库 ， 同 时 使 
用 对 象 仓库 的 index() 方 法 获取 userNamelIndex 索引 。 

最 后 ， 需 要 通过 索引 的 openCursor0 方 法 创建 并 打开 一 个 游标 。 


6.4 案例 ; 设计 录入 表单 








本 例 使 用 indexedDB API 设计 一 个 电子 刊物 发 布 的 应 用 , 演示 效果 如 图 6.14 所 示 。 在 示例 页 面 中 
显示 3 个 表单 框 , 第 一 个 表单 框 登 录 电子 刊物 信息 ， 并 保存 在 indexedDB 数据 库 中。 第 二 个 表单 框 用 
于 管理 数据 库 中 的 记录 ,可 以 根据 需要 清空 全 部 记录 , 或 者 删除 指定 的 记录 。 第 三 个 表单 框 用 于 显示 
数据 库 中 所 有 的 电子 刊物 记录 。 
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图 6.14 ”电子 刊物 发 布 应 用 效果 





具体 操作 步骤 请 扫 码 学 习 。 
6.5 在 线 练 习 
练习 使 用 HTMLS 本 地 存储 方法 。 
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应 用 程序 缓存 


HTML5 新 增 ApplicationCache API 接口 ， 提 供 了 应 用 程序 缓存 的 功能 。 在 页 面 加 载 时 ， 
多 许 用 户 绥 存 各 种 资源 文件 。 这 样 在 离线 状态 下 ， 应 用 程序 可 以 读 写 组 存 文 件 ， 不 需要 与 远 
程 保 持 联 系 ; 当 在线 状 态 时 ， 应 用 程序 能 够 根据 缓存 文件 及 时 更 新 远程 数据 ， 保 证 缓存 数据 
与 远程 数据 同步 ; 如 果 组 存 文件 与 远程 文件 同步 ， 则 优先 访问 缓存 文件 ， 以 提升 访问 速度 和 
运行 效率 。 


【学 习 重 点 】 
MH 正确 使 用 manifest 文件 。 
WI 使 用 HTML5 ApplicationCache API 设计 Web 离线 应 用 程序 。 
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7.1 ApplicationCache API 基础 


HTMLS5 通过 ApplicationCache API 使 离线 存储 成 为 可 能 。 离 线 存 储 (Offline Storage) 的 核心 功 | 
能 : 在 断 网 状态 下 ， 用 户 依然 能 够 访问 站 点 ;在 联网 状态 下 ， 会 自动 更 新 缓存 数据 。 利 用 HIML5 离 | 
线 存储 功能 可 以 开发 出 很 多 丰富 的 基于 Web 的 应 用 。 | 


7.1.1 认识 ApplicationCache API | 


一 个 页 面 刚 加 载 完毕 ， 突 然 断 网 ， 刷 新 页 面 后 就 没 了 。 如 果 刷 新 页 面 后 ， 还 是 刚才 的 页 面 ,在 新 | 
窗口 中 重新 访问 该 页 面 ， 输入 相同 的 网 址 ,在 断 网 状态 下 打开 依然 是 原来 那个 页 面 。 如 果 在 没有 网 络 | 
的 地 方 〈《 如 飞机 上 ) 和 时 候 (网 络 坏 了 )， 也 能 够 进行 Web 操作 ， 等 到 有 网 络 的 时 候 ， 再 同步 到 Web | 
上 ， 就 大 大 方便 了 用 户 的 使 用 。 

越 来 越 多 的 应 用 被 移植 到 云端 ， 但 网 络 连接 中 断 时 有 发 生 ， 如 外 出 旅行 、 身 处 无 网 环境 等 。 间 断 | 
性 的 网 络 连接 一 直 是 网 络 计算 系统 致命 的 弱点 ， 如 果 应 用 程序 完全 依赖 于 与 网 络 的 通信 ， 而 网 络 又 无 
法 连接 时 ， 用 户 就 无 法 正常 使 用 应 用 程序 。 

HTML5 的 ApplicationCache API 综合 了 Web 应 用 和 桌面 应 用 两 者 的 优势 ， 基 于 Web 技术 构建 的 
Web 应 用 程序 ， 可 以 在 浏览 器 中 运行 并 在 线 更 新 ， 也 可 在 脱 机 情况 下 使 用 。 离 线 应 用 缓存 使 得 在 无 网 
络 连接 状态 下 运行 应 用 程序 成 为 可 能 ， 这 类 应 用 程序 用 处 很 多 ， 简 单 举例 说 明 如 下 : 
阅读 和 撰写 电子 邮件 。 

编辑 文档 。 

编辑 和 显示 演示 文档 。 

创建 待 办 事宜 列表 。 

HTMLS5 离线 应 用 有 三 个 好 处 : 

用 户 可 以 离线 访问 Web 应 用 ， 不 用 时 刻 保持 与 互联 网 的 连接 。 

因为 文件 被 缓存 在 本 地 ， 提 升 了 页 面 加 载 速度 。 

回 ”离线 应 用 只 加 载 被 修改 过 的 资源 ， 因 此 大 大 降低 了 用 户 请 求 服务 器 造成 的 负载 压力 。 | 

用 户 可 以 直接 控制 应 用 程序 缓存 。 利用 缓存 清单 文件 将 相关 资源 组 织 到 同一 个 逻辑 应 用 中 。 这样 | 
Web 应 用 就 拥有 了 桌面 应 用 的 特性 。 缓 存 清单 文件 中 标识 的 资源 构成 了 应 用 缓存 (Application Cache)， | 
它 是 浏览 器 持久 性 存储 资源 的 地 方 , 通常 在 硬盘 上 。 有 些 浏览 器 向 用 户 提供 了 查看 应 用 程序 缓存 中 数 | 
据 的 方法 。 

例如 ， 在 新 版 Firefox 中 ，about:cache 页 面 会 显示 应 用 程序 缓存 的 详细 信息 ， 提 供 了 查看 缓存 中 | 
的 每 个 文件 的 方法 ， 如 图 7.1 所 示 。 

浏览 器 对 HTMLS5 离线 应 用 的 支持 情况 如 表 7.1 所 示 ， 从 中 可 以 看 到 目前 大 部 分 浏览 器 已 经 支持 | 
HIML5 离线 应 用 。 
HTMLS5 离线 应 用 的 支持 程度 不 同 ， 在 使 用 之 前 建议 先 测试 浏览 器 的 支持 情况 。 检 测 方法 如 下 : 
这 windowapplicationCache) { 
/浏览 器 支持 的 离线 应 用 





的 





} 
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图 7.1 Firefox 的 about:cache 页 面 
表 7.1 浏览 器 支持 概述 





| 
| 浏 览 器 说 了 明 
| 正 不 支持 
| Firefox 3.5 及 以 上 的 版 本 支持 
| Opera 10.6 及 以 上 的 版 本 支持 
| Chrome 4.0 及 以 上 的 版 本 支持 
| Safari 4.0 及 以 上 的 版 本 支持 
| iPhone 2.0 及 以 上 的 版 本 支持 

Android 2.0 及 以 上 的 版 本 支持 

7.1.2 配置 服务 器 
HTMLS5 离线 缓存 包含 两 部 分 内 容 : 


| 回 manifest 文件 ，manifest 文件 包含 了 需要 缓存 的 资源 清单 。 

| 回 JavaScript 程序， 提供 用 于 更 新 缓存 文件 的 方法 ， 以 及 对 缓存 文件 的 操作 。 

| manifest 文件 是 一 个 文本 文件 , 列 出 了 浏览 器 为 离线 应 用 缓存 的 所 有 资源 。 manifest 文件 的 MIME 
| 类 型 是 text/cache-manifest。 

| Python 标准 库 中 的 SimpleHTTPServer 模块 对 扩展 名 为 .manifest 的 文件 能 配 以 头 部 信息 : 
Content-type:text/cache-manifest, 配置 方法 是 打开 PYTHON_HOME/Lib/mimetypes.py 文件 并 添加 一 行 
| 代码 ; 

| ". manifest': ‘text/cache-manifest manifest， 





如 果 要 配置 Apache HTTP 服务 器 ， 需 要 将 下 面 一 行 代码 添加 到 Apache Software 
Foundation\Apache2.2\conf 文件 夹 的 mime.type 文件 中 ， 如 图 7.2 所 示 。 


text/cache-manifest manifest 
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文件 (站 ” 蝙 编 {E) 格式 (O) 下 看 (V) 帮助 (H) 
# multipart/encrypted 








# text/example 
图 7.2 配置 Apache HTTP 服务 器 
7.1.3 认识 manifest 


manifest 文件 的 基本 语法 如 下 : 
第 一 行 必须 以 CACHE MANIFEST 字符 串 开头 。 
然后 换行 ， 每 行 单列 资源 文件 〈 包 含 路 径 ) 。 
每 行 的 换行 符 可 以 是 CR、LF 或 者 CRLF。 
文本 编码 格式 必须 是 UTF-8。 
注释 必须 以 # 开 头 。 

manifest 文件 包括 三 个 节点 : 

CACHE: 

manifest 文件 的 默认 入 口 ， 在 此 入 口 之 后 罗列 的 文件 , 或 直接 写 在 CACHE MANIFEST 后 的 文件 
在 下 载 到 本 地 后 会 被 缓存 起 来 。 

回 NETWORK: 

可 选 节点 ， 在 此 节点 后 面 所 罗列 的 文件 是 需要 访问 网 络 的， 即使 用 户 离线 访问 ， 也 会 直接 跳 过 组 
存 而 访问 服务 器 。 

回 FALLBACK: 

可 选 节点 ， 指 定 无 法 访问 资源 时 的 回调 页 面 。 每 一 行 包括 两 个 URI， 第 一 个 是 资源 文件 URI， 第 
二 个 是 回调 页 面 URI。 


< 注意 : 以 上 节点 没有 先后 顺序 ， 而 且 在 同一 个 manifest 中 可 以 多 次 出 现 。 


【示例 1】 新 建 一 个 以 manifest 为 扩展 名 的 文件 ， 命 名 为 cacheData manifest， 在 这 个 文件 中 设置 

要 缓存 的 文件 路 径 列表 : login.html、icss、alipay-i-logo-big.png、alipay-i-icons.png、mui-min.js; 另外 
定义 需要 访问 网 络 的 文件 列表 : button-ok.png， 以 及 备用 文件 列表 : alipay-bank-cmb.png。 

CACHE MANIFEST 

#version 1.0 

login html 

static/css/i.css 

static/img/png/alipay-i-logo-big.png 





轿 图 回回 加 
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static/img/png/alipay-i-icons.png 
static/js/mui-min.js 

NETWORK: 
static/img/png/button-ok.png 


仿 7 | CACHE: 


| static/img/png/login-slider-bg.png 
es 
static/img/png/alipay-bank-icbc.png static/img/png/alipay-bank-cmb.png 


每 个 站 点 都 有 5MB 空间 来 存储 缓存 数据 ， 如 果 manifest 文件 或 文件 里 所 列 的 文件 无 法 加 载 ， 整 
个 缓存 更 新 过 程 将 无 法 进行 ， 浏 览 器 会 使 用 最 后 一 次 成 功 的 缓存 数据 。 

如 果 没 有 指定 “CACHE:” 节 点 标题 ， 那 么 默认 就 是 CACHE MANIFEST 部 分 。 下 面 manifest 文 
件 设置 了 两 个 要 缓存 的 文件 : 

CACHE MANIFEST 

application .js 

style.css 

添加 到 CACHE MANIFEST 区 块 中 的 文件 , 无 论 应 用 程序 是 否 在 线 , 浏览 器 都 会 从 应 用 程序 缓存 
中 获取 该 文件 。 没 有 必要 在 这 里 列 出 应 用 程序 的 主 HTML 资源 , 因为 最 初 指向 manifest 文件 的 HTML 
文档 会 被 隐 含 进来 。 但 是 ， 如 果 希 望 缓存 多 个 HTML 文件 ， 或 者 希望 将 多 个 HTML 文件 作为 支持 组 
存 的 应 用 程序 的 可 选 入 口 ， 则 需 将 这 些 文 件 列 在 CACHE MANIFEST 中 。 

FALLBACK 部 分 提供 了 获取 不 到 缓存 资源 时 的 备 选 资源 路 径 。 第 一 个 文件 的 路 径 和 第 二 个 文件 
的 路 径 中 间 有 一 个 空格 ， 这 个 “FALLBACK:” 的 作用 是 : 当 第 一 个 文件 缓存 不 成 功 ， 或 无 法 找到 时 ， 
它 会 缓存 第 二 个 文件 。 

【示例 2】 下 面 示 例 设 计 当 无 法 获取 app/ajax 时 ， 所 有 app/ajax/ 及 其 子路 径 的 请 求 都 会 被 转发 给 

defaulthtml 文件 来 处 理 。 

CACHE MANIFEST 

# 缓 存 文件 列表 

abouthtml 

htmls.css 

index.html 

happy-trails-rc.gif 

lake-tahoe.JPG 

# 不 缓存 注册 页 面 

NETWORK 

signup.html 

FALLBACK 

signup.html offline.html 

/app/ajax/ defaulthtml 


| 【示例 3】# 和 表示 注释 行 标识 符 ， 但 它 还 有 一 个 小 作用 : Web 应 用 的 缓存 只 有 在 manifest 文件 被 
| 修改 的 情况 下 才 会 被 更 新 ,所 以 如 果 只 是 修改 了 被 缓存 的 文件 ,那么 用 户 本 地 的 缓存 还 是 不 会 被 更 新 
| 的 ， 但 是 可 以 通过 修改 manifest 文件 来 告诉 浏览 器 需要 更 新 缓存 。 


# 指 明 缓存 入 口 
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CACHE: 
index html | 
style.css | 
images/logo.png | 
scripts/main.ijs | 图 


# 以 下 资源 必须 在 线 访问 | 
NETWORK: 


login php | 








# 如 果 index.php 无 法 访问 则 用 404.html 代 蔡 
FALLBACK: 
/index.php /404.html 
修改 注释 行 的 文件 版 本 : 
# Wanz app V2 
这 样 做 有 三 个 好 处 : 
可 以 很 明确 地 了 解 离线 Web 应 用 的 版 本 。 
通过 简单 地 修改 这 个 版 本 号 就 可 以 轻易 地 通知 浏览 器 进行 更 新 。 
可 以 配合 JavaScript 程序 来 完成 缓存 更 新 。 
【示例 4】 创 建 好 了 cacheData.manifest 文件 ， 下 面 就 需要 在 HTML 文件 中 指定 文档 的 manifest 
属性 为 cache.mnifest 文件 的 路 径 。 
<html manifest="cacheData.manifest"></html> 
manifest 的 文件 路 径 可 以 是 绝对 路 径 或 相对 路 径 ， 甚 至 可 以 引用 其 他 服务 器 上 的 manifest 文件 。 
该 文件 所 对 应 的 mime-type 应 该 是 text/cache-manifest, 所 以 需要 配置 服务 器 来 发 送 对 应 的 MIME 类 型 
引用 manifest 文件 的 页 面 ， 不 管 有 没有 罗列 清单 ， 都 会 被 缓存 。 
容 提示 :由 于 有 某 些 浏览 器 中 仅仅 添加 这 一 属性 ， 可 能 并 不 能 很 好 地 工作 ， 所 以 一 定 要 用 HTMLS 
文档 声明 方式 创建 HTML 页 面 。 


<!DOCTY?PE html> 
<html manifest="cacheData.manifest"></html> 


7.1.4 使 用 ApplicationCache 


使 用 ApplicationCache 需要 三 步 操作 : 

第 1 步 ， 配 置 服务 器 manifest 文件 的 MIME 类 型 ， 

第 2 步 ， 编 写 manifest 文件 ; 

第 3 步 ， 在 页 面 的 html 元 素 的 manifest 属性 中 引用 manifest 文件 。 
完成 上 述 三 步 之 后 ， 即 使 拔 掉 网 线 ， 也 可 以 访问 页 面 。 





< 庙 注意 : 启用 离线 应 用 之 后 ， 当 修改 JavaScript 代码 或 CSS 样式 ， 然 后 将 更 新 内 容 上 传 到 服务 器 ， 
在 本 地 刷新 页 面 重新 预览 时 , 会 发 现 无 法 看 到 最 新 的 页 面 效果 . 那 是 因为 本 地 浏览 器 还 没 
有 更 新 HTML5 的 离线 存储 文件 。 
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更 新 HTMLS5 离线 缓存 有 三 种 方法 : 
清除 离线 存储 的 数据 。 这 个 不 一 定 是 清理 浏览 器 历史 记录 就 可 以 做 到 的 ， 因 为 不 同 浏览 器 
管理 离线 存储 的 方式 不 同 。 例 如 ， 在 Firefox 浏览 器 中 需要 选择 “选项 ”一 “高 级 ”一 “网 
含 内 | 络 ” 一 “ 脱 机 存储 ”命令 ， 然 后 在 其 中 清除 离线 存储 数据 。 
| 修改 manifest 文件 。 修 改 了 manifest 文件 里 所 罗列 的 文件 也 不 会 更 新 缓存 ， 而 是 要 更 新 
manifest 文件 。 
| 使 用 JavaScript 编写 更 新 程序 。 
ApplicationCache API 是 离线 缓存 的 应 用 接口 ,通过 window.applicationCache 对 象 可 触发 一 系列 与 
| 缓存 状态 相关 的 事件 。 该 对 象 有 一 个 数值 型 属性 window.applicationCache.status, 它 代 表 了 缓存 的 状态 。 
| 缓存 状态 共有 6 种 ， 说 明 如 表 7.2 所 示 。 


表 7.2 缓存 状态 说 明 


加 


Status 值 说 了 明 
0 UNCACHED (未 缓存 ) 
1 IDLE (空闲 ) 
2 CHECKING (检查 中 ) 
加 DOWNLOADING (下 载 中 ) 
4 UPDATEREADY (更 新 就 绪 ) 
5 OBSOLETE (过 期 ) 


目前 ， 互 联网 上 大 部 分 的 页 面 都 没有 指定 缓存 清单 ， 所 以 这 些 页 面 的 状态 就 是 UNCACHED (未 
缓存 )。IDLE (空闲 ) 是 带 有 缓存 清单 的 应 用 程序 的 典型 状态 。 处 于 空闲 状态 说 明 应 用 程序 的 所 有 资 
源 都 已 被 浏览 器 缓存 ， 当 前 不 需要 更 新 。 如 果 缓 存 曾经 有 效 ， 但 现在 manifest 文件 丢失 ， 则 缓存 进入 
OBSOLETE (过 期 ) 状态 。 对 于 上 述 各 种 状态 ，API 包含 了 与 之 对 应 的 事件 和 回调 特性 。 

例如 ， 当 缓存 更 新 完成 进入 空闲 状态 时 ， 会 触发 cached 事件 。 此 时 ， 可 能 会 通知 用 户 ， 应 用 程 
序 已 处 于 离线 模式 可 用 的 状态 ， 可 以 断 开 网 络 连接 了 。 如 表 7.3 所 示 是 一 些 与 缓存 状态 有 关 的 常见 
事件 。 


表 7.3 缓存 事件 说 明 











说 
IDLE (空闲 ) 


明 





oncached 











onchecking CHECKING (检查 中 ) 
ondownloading DOWNLOADING (下 载 中 ) 
onupdateready UPDATEREADY (更 新 就 绪 ) 





OBSOLETE (过 期 ) 





onobsolete 





此 外 ， 没 有 可 用 更 新 或 者 发 生 错 误 时 ， 还 有 一 些 表示 更 新 状态 的 事件 ， 例 如 : 
‘onerror 

onnoupdate 

‘onprogress 


| 
window.applicationCache 有 一 个 update() 方 法 ， 调 用 该 方法 会 请 求 浏览 器 更 新 缓存 。 包 括 检查 新 
| 人 全 文件 并 下 载 必 要 的 新 资源 。 如 果 没 有 缓存 或 者 缓存 已 过 期 ， 则 会 抛 出 错误 。 


s186， 


第 7 章 应 用 程序 重 在 一 3 | 


【示例 1】 其 中 常用 代码 说 明 如 下 : 


// 返 回应 用 于 当前 window 对 象 文档 的 ApplicationCache 对 象 

cache= window.applicationCache 

// 返 回应 用 于 当前 shared worker 的 ApplicationCache 对 象 [shared worker] 

cache = selfapplicationCache 

/返回 当前 应 用 的 缓存 状态 ，status 有 五 种 无 符号 短 整 型 值 的 状态 ， 说 明 如 表 7.2 所 示 
cache.status 

/调用 当前 应 用 资源 下 载 过 程 

cache.update() 

// 更 新 到 最 新 的 缓存 ， 该 方法 不 会 使 之 前 加 载 的 资源 突然 被 重新 加 载 
cache.swapCache() 


调用 swapCache() 方 法 ， 图 片 不 会 重新 加 载 ， 样 式 和 脚本 也 不 会 重新 泻 染 或 解析 。 在 获取 status | 


属性 时 ， 它 返回 当前 applicationCache 的 状态 ， 它 的 值 有 以 下 几 种 状态 : 


UNCACHED (0): ApplicationCache 对 象 的 缓存 宿主 与 应 用 缓存 无 关联 。 

IDLE (1): 应 用 缓存 已 经 是 最 新 的 ， 并 且 没有 标记 为 obsolete。 

CHECKING (2): ApplicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 缓存 关联 ， 并 且 该 缓存 | 
的 更 新 状态 是 checking。 

DOWNLOADING (3): ApplicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 缓存 关联 ， 并 且 该 
缓存 的 更 新 状态 是 downloading。 


UPDATEREADY (4): ApplicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 缓存 关联 ， 并 且 该 
缓存 的 更 新 状态 是 idle， 并 且 没 有 标记 为 obsolete， 但 是 缓存 不 是 最 新 的 。 

OBSOLETE(5): ApplicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 缓存 关联 ， 并 且 该 缓存 的 
更 新 状态 是 obsolete。 

如 果 update 方法 被 调用 了 ， 浏 览 器 就 必须 在 后 台 调 用 应 用 缓存 下 载 过 程 ， 如 果 swapCache 方法 

被 调用 了 ， 浏 览 器 会 执行 以 下 步骤 : 
第 1 步 ， 检 查 ApplicationCache 的 缓存 宿主 是 否 与 应 用 缓存 关联 。 
第 2 步 ， 让 cache 成 为 ApplicationCache 对 象 的 缓存 宿主 关联 的 应 用 缓存 。 


第 3 步 ， 如 果 cache 的 应 用 缓存 组 被 标记 为 obsolete， 那 么 就 取消 cache 与 ApplicationCache 对 象 | 


的 缓存 宿主 的 关联 并 取消 这 些 步 骤 ， 此 时 所 有 资源 都 会 从 网 络 中 下 载 而 不 是 从 缓存 中 读 取 。 
第 4 步 ， 检 查 同 一 个 缓存 组 中 是 否 存在 完成 标志 为 “完成 ”的 应 用 缓存 ， 版 本 比 cache 更 新 。 
第 5 步 ， 让 完成 标志 为 “完成 ”的 新 cache 成 为 最 新 的 应 用 缓存 。 

第 6 步 ， 取 消 cache 与 ApplicationCache 对 象 的 缓存 宿主 的 关联 并 用 新 cache 代替 关联 。 
【示例 2】 通 过 下 面 的 代码 可 以 检查 当前 页 面 缓存 的 状态 。 
Var appCache = window.applicationCache: 
switch (appCache.status) { 
case appCache.UNCACHED: 
/UNCACHED 一 0 
alert(UNCACHED’): 
break 
case appCache.IDLE: 
/IDLE 一 1 
alert(IDLE7): 
break: 
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case appCache.CHECKING: 
/CHECKING 一 2 
alert(CHECKING)): 
break: 
全 | case appCache. DOWNLOADING: 
一 一 /DOWNLOADING 一 3 


alert(DOWNLOADING): 


| case appCache.UPDATEREADY: 
| /UPDATEREADY 一 5 

| alert(‘UPDATEREADY"); 

| break; 

| case appCache.OBSOLETE: 

| /OBSOLETE 一 5 

| alert(OBSOLETE'): 

| break; 

| default: 

| alert(UKNOWN CACHE STATUS); 
| break 
| 

| 

| 

| 

| 


六 
更 新 的 实现 过 程 大 概 是 这 样 的 : 

| 调用 applicationCache.updateO) 让 浏览 器 开始 尝试 更 新 。 操 作 前 提 是 manifest 文件 是 更 新 过 的 ， 如 
| 修改 manifest 版 本 号 。 

| 在 applicationCache.status 为 UPDATEREADY 状态 时 ， 就 可 以 调用 applicationCache.swapCache() 
| 方法 来 将 旧 的 缓存 更 新 为 新 的 。 

Var appCache = window.applicationCache: 

appCache.update(): /开始 更 新 

if (appCache.status 一 window.applicationCache.UPDATEREADY) { 

appCache.swapCache(): // 得 到 最 新 版 本 缓存 列表 ， 且 成 功 下 载 资源 ， 更 新 缓存 到 最 新 


容 提示 : 更 新 过 程 很 简单 ， 但 是 一 个 好 的 应 用 少不了 容错 处 理 ， 如 Ajax 技术 一 样 ， 需 要 对 更 新 过 
程 进行 监控 ， 处 理 各 种 异常 或 提示 等 待 状 态 来 使 Web 应 用 更 强壮 、 用 户 体验 更 好 ， 因 此 
需要 了 解 applicationCache 的 更 新 过 程 所 触发 的 事件 ， 主 要 包括 onchecking、onerror、 
onnoupdate、ondownloading、onprogress、onupdateready、oncached 和 onobsolete。 要 对 更 
新 错误 进行 处 理 ， 可 以 这 样 写 : 

var appCache = window.applicationCache: 

// 请 求 manifest 文件 时 返回 404 或 410， 下 载 失败 


/或 manifest 文件 在 下 载 过 程 中 源 文 件 被 修改 会 触发 error 事件 
appCache.addEventListener('error. handleCacheError. false): 


| 
| 
| 
| 
| 
| 
| 
| 
| 


function handleCacheError(e) { 
alert(Error: Cache failed to update!"): 

| 时 

| 

| 不 管 是 manifest 文件 ， 还 是 它 所 罗列 的 资源 文件 下 载 失 败 ， 整 个 更 新 过 程 终止 了 ， 浏 览 器 会 使 用 

| 上 一 个 最 新 的 缓存 。 
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7.1.5 ”事件 监听 


HTML5 引入 了 一 些 新 的 事件 ， 用 来 让 应 用 程序 检测 网 络 是 否 正 常 连接 。 应 用 程序 处 于 在 线 状态 | 
和 离线 状态 会 有 不 同 的 行为 模式 。 是 否 处 于 在 线 状态 可 以 通过 检测 window.navigator 对 象 的 属性 来 做 | 
判断 。 | 
navigator.onLine 是 一 个 标明 浏览 器 是 否 处 于 在 线 状态 的 布尔 属性 。 当 然 ，onLine 值 为 tre 并 不 
能 保证 Web 应 用 程序 在 用 户 的 机 器 上 一 定 能 访问 到 相应 的 服务 器 。 而 当 其 值 为 false 时 ， 不 管 浏览 器 | 
是 否 真正 联网 ， 应 用 程序 都 不 会 尝试 进行 网 络 连接 。 | 
【示例 1】 查 看 页 面 状态 是 在 线 还 是 离线 的 代码 如 下 : 
// 当 页 面 加 载 时 ， 设 置 状态 为 online 或 者 offline 
function loadDemoO { 
这 navigatoronLine) { 
log("Online"):; 
}else{ 
log("Offline"):; 





} 


) 

/增加 事件 监听 ， 当 在 线 状 态 发 生变 化 时 ， 将 触发 响应 

window.addEventListener("online", function(e) { 
log("Online"): 

}. true); 

window.addEventListener("offline", function(e) { 
log("Offline"): 

}. true): 

【示例 2】 在 支持 HIMLS 离线 存储 的 浏览 器 中 ，window 对 象 有 一 个 applicationcache 属性 ， 通 过 
window.applicationcach 可 以 获得 一 个 DOMApplicationCache 对 象 ， 这 个 对 象 来 自 DOMApplicationCache | 
类 ， 这 个 类 有 一 系列 的 属性 和 方法 。 

首先 ， 获 取 DOMApplicationCache 对 象 。 


var cache = window.applicationcache: 
接着 ， 触 发 cache 对 象 的 一 些 事件 来 检测 缓存 是 否 成 功 。 


/*oncached 事件 表示 : 当 更 新 已 经 处 理 完成 ， 并 且 存储 。 
* 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 4 
A 
cache.addEventListener('cached'. function|O { 
console.log('Cached. Status:' + cache.status): 
}, false); | 
/*onchecking 事件 表示 : 当 更 新 已 经 开始 进行 , 但 资源 还 没有 开始 下 载 ， 意思 就 是 说 : 刚刚 获取 到 最 新 的 资源 。 | 
* 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 2 
ed 
cache.addEventListener(checking' functionO { 
console.log('Checking. Status:' + cache.status): 
}. false): 
/*ondownloading 事件 表示 : 开始 下 载 最 新 的 资源 。 
* 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 3 
Si 
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| cache.addEventListener('downloading'. function0 { 
| console.log(Downloading.Status-" + cache status): 
| 小 Blse: 

/*onerror 事件 表示 : 有 错误 发 生 , 如 manifest 文件 找 不 到 , 或 服务 端 有 错误 , 或 资源 找 不 到 , 都 会 触发 onerror 
件 


“+ 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 0 


到 
cache.addEventListener('error', fonction0 { 


| console.log('Error, Status:" + cache. status); 
| }, false); 
/*onnoupdate 事件 表示 : 更 新 已 经 处 理 完成 ， 但 是 manifest 文件 还 未 改变 ， 处 理 闲置 状态 。 
* 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 1 
3 
cache.addEVventListener(noupdate' function() { 
console.log('Noupdate, Status:' + cache.status); 
}, false); 
/*onupdateready 事件 表示 : 更 新 已 经 处 理 完成 ， 新 的 缓存 可 以 使 用 。 
* 如 果 一 切 正常 ， 这 里 cache 的 状态 应 该 是 4 
eh 
cache.addEventListener(updateready', function() { 
console.log('Updateready. Status:' + cache.status): 


cache.swapCache(): 
}, false); 
了 缓存 文件 。 


| 如 果 在 开发 过 程 中 就 开始 对 离线 存储 功能 做 单元 测试 ， 那 么 每 一 次 修改 文件 都 必须 要 更 新 
| manifest 文件 中 的 内 容 ， 即 使 更 新 了 一 个 注释 ， 整 个 manifest 文件 也 会 更 新 ，DOMApplicationCache 
| 对 象 也 会 触发 上 述 的 一 系列 事件 ， 直 到 新 的 缓存 文件 可 用 为 止 。 通 常情 况 下 ， 一 般 都 是 通过 更 新 
manifest 文件 中 的 版 本 号 以 触发 onupdateready 事件 。 


7.2 案例 实战 


| 
| 
| 
| 
| 
| 
| 
| 
| 
通过 以 上 代码 可 以 发 现 ， 当 DOMApplicationCache 对 象 触发 了 updateready 事件 时 ， 才 真正 更 新 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


| 下 面 通过 几 个 具体 案例 熟悉 HTMLS 的 离线 缓存 的 具体 应 用 。 
7.2.1 缓存 首页 


| 本 节 示 例 将 通过 一 个 简单 的 首页 缓存 演示 HTML 离线 缓存 的 应 用 。 整 个 过 程 只 需要 简单 的 5 步 
| 即 可 完成 ， 当 然 要 设计 更 加 复杂 的 离线 应 用 ， 还 需要 读者 结合 HTML5 其 他 新 技术 ， 并 进行 更 加 复杂 
的 设置 才 行 。 
【操作 步骤 】 
第 1 步 , 添加 HIML5 Doctype。 创建 符合 规范 的 HTML5 文档 。 HTML5 Doctype 相 比 于 XHTML 
版 本 的 doctype 而 言 ， 要 简单 明了 很 多 。 
<link href="style.css" type="text/css" rel="stylesheet" media="screen"> 
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<meta name="viewport" content= "width=device-width: initial-scale=1.0: maximum-scale=1.0:"> | 


<div id="container"> 
<header class="ma-class-en-css"> 
<hl id ="logo"><a href="#">HTML5</a></h1> 
</header> 
<div id="content"> 
<h2>HTML5</h2> | 
<p>HTML 标准 自 1999 年 12 月 发 布 的 HTML 4.01 后 ， 后 继 的 HTML 5 和 其 他 标准 被 束之高阁 ， | 
为 了 推动 web 标准 化 运动 的 发 展 ， 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫 作 Web Hypertext Application Technology | 
Working Group 〈Web 超 文本 应 用 技术 工作 组 - WHATWG) 的 组 织 ，HTML5 草案 的 前 身 名 为 Web Applications | 
1.0， 于 2004 年 被 WHATWG 提出 ， 于 2007 年 被 W3C 接纳 ， 并 成 立 了 新 的 HTML 工作 团队 。</p> | 
<p>HTML 5 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 .HTML 5 有 两 大 特点 :首先 ,强化 了 Web | 
网 页 的 表现 性 能 。 其 次 ， 追 加 了 本 地 数据 库 等 Web 应 用 的 功能 。</p> 
</div> 
<footer>html5 by <a href="#">WHATWG</a></footer> 
</div> 
然后 另存 为 ndexl.html， 放 在 站 点 根 目录 下 。 
第 2 步 ， 添 加 .htaccess 支持 。 在 创建 用 于 缓存 页 面 的 manifest 清单 文件 之 前 ， 先 要 在 .htaccess 文 | 
件 中 添加 以 下 代码 ， 具 体 说 明 请 参考 上 节 说 明 。 
AddType text/cache-manifest .manifest 


该 指令 可 以 确保 每 个 manifest 文件 为 text/cache-manifest MIME 类 型 。 如 果 MIME 类 型 不 对 , 那 | 
么 整个 清单 将 没有 任何 效果 ， 页 面 将 无 法 离线 应 用 。 
< 注意 : 本 章 案 例 都 在 Apache HTTP Server 服务 器 环境 下 运行 ， 读 者 在 测试 之 前 ， 应 该 在 本 地 计 
算 机 中 构建 虚拟 的 Apache 服务 器 环境 。 


容 提示 htaccess 文件 被 称 为 分 布 式 配置 文件 ， 是 Apache 服务 器 中 的 一 个 配置 文件 ， 它 提供 了 针 | 
对 目录 改变 配置 的 方法 ， 负 责 相 关 目录 下 的 网 页 配置 。 通 过 htaccess 文件， 可 以 帮 我 们 实 | 
现 : 网 页 重 定向 、 自 定义 错误 页 面 、 改 变 文件 扩展 名 、 允 许 /阻止 特定 的 用 户 或 者 目录 的 | 
访问 、 禁 止 目录 列表 、 配 置 默认 文档 等 功能 。 


启用 .htaccess， 需 要 修改 httpd.conf， 启 用 AllowOverride， 并 可 以 用 AllowOverride 限制 特定 命令 | 
的 使 用 。 如 果 需 要 使 用 .htaccess 以 外 的 其 他 文件 名 ， 可 以 用 AccessFileName 指令 来 改变 。 例 如 ， 需 要 | 
使 用 .config， 则 可 以 在 服务 器 配置 文件 中 按 以 下 方法 配置 : AccessFileName.config。 
第 3 步 ， 创 建 manifest 文件 。 配置 服 务 器 之 后 ， 就 可 以 创建 manifest 清单 文件 。 新 建 一 个 文本 | 
文档 ， 另 存 名 为 ofhline manifest， 然 后 输入 以 下 代码 。 


CACHE MANIFEST 
#This is a comment 





由 入 
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在 CACHE 声明 之 后 ， 罗 列 出 所 有 需要 缓存 的 文件 。 这 对 于 缓存 简单 页 面 来 说 已 经 足够 。 但 是 
全 ff HTMLS5 缓存 还 有 更 多 可 能 。 例 如 ， 考 虑 以 下 manifest 文件 : 

CACHE MANIFEST 

Note #This is a comment 

CACHE: 

index.html 

style.css 


NETWORK: 

search.php 

login.php 

FALLBACK: 

/api offline.html 

其 中 CACHE 声明 用 于 缓存 index.html 和 style.css 文件 。 同时 , NETWORK 声明 用 于 指定 无 须 组 
存 的 文件 ， 如 登录 页 面 。 最 后 一 个 是 FALLBACK 声明 ， 这 个 声明 允许 在 资源 不 可 用 的 情况 下 ， 将 用 
户 重 定向 到 特定 文件 ， 如 offline.html。 

第 4 步 ,关联 manifest 文件 到 HTML 文档 .设计 完 manifest 文件 和 HTML 文档 ,还 需要 将 manifest 
文件 关联 到 HTML 文档 中 。 使 用 html 元 素 的 manifest 属性 : 

<html manifest="/offline.manifest"> 

第 5 步 ， 测 试 文档 。 完 成 后 ， 使 用 Firefox 3.5+ 本 地 访问 index.html 文件 ， 效 果 如 图 7.3 所 示 ， 浏 
览 器 会 默认 自动 缓存 。 


组 语 首 页 


可 localhostjindexlhtml 


| HTML 标 准 白 1999 年 12 月 发 布 的 HTML 4.01 后 ,后代 的 HTML 5 和 其他 奈 准 技 束之高阁 , 为 了 推动 
Web 标 在 化 运动 的 发 展 , 一 些 公司 联合 超 来, 成 立 了 一 个 叫 作 Web Hypertext Application 

| Technology Working Group〔 Web 超 立 本 应 用 技术 工作 组 - WHATWG ) 的 组 织 .HTVLc 草 襟 的 前 
| 身 各 为 Web Applications 1.0 , 于 2004 年 被 WHATWG 提 出 ， 于 2007 年 被 W3C 按 商 ,并 成 立 了 新 的 

| HMLIHEER. 


HTML 5 的 第 一 份 正式 曹安 已 于 2008 年 1 月 22 日 公布 。HTML 5 有 两 大 特点 : 首先 , 强 比 了 Web 网 页 
的 表现 性 徊 . 其次， 追加 了 本 地 私 据 库 等 Wab 详 用 的 功能 . 


hans by WHATWG 





图 7.3 测试 首页 离线 缓存 


此 后 即使 服务 器 停止 工作 或 者 无 法 上 网 ， 我 们 依然 可 以 访问 服务 器 上 的 该 首页 。 如 果 没 有 离线 存 
| 储 的 支持 ， 则 当 服务 器 停止 工作 或 者 无 法 上 网 时 访问 首页 ， 将 会 显示 如 图 7.4 所 示 的 效果 。 
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TY localhostindez2 berl 


无 法 连接 


Firefox 无 法 建立 到 localhost 服务 闫 的 连接 ， 


。 此 站 点 稍 时 不 可 用 亚 者 太 忙 ， 请 病 后 再 斌 。 
* 如 采 你 无 法 和 入 任何 页 而 ， 戎 检查 低 计 算 机 的 网 经 连 接 。 
。 如 采 作 的 计算 机 或 网 络 受 到 防 淡 培 或 者 代理 服务 种 的 保护 ， 请 器 认 firefox 已 被 授权 访问 网 络 。 





图 74 不 支持 离线 缓存 的 效果 
7.2.2 ”离线 编辑 


以 在 其 中 添加 和 删除 便签 。 它 支持 离线 功能 ,允许 用 户 在 离线 状态 下 添加 、 删 除 便签 ， 
并 且 当 在 线 以 后 能 够 同步 到 服务 器 上 。 
具体 操作 步骤 和 代码 解析 请 扫 码 学 习 。 





7.3 在 线 练 习 


练习 使 用 HTML5 应 用 缓存 的 功能 。 
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多 线程 编程 


JavaScript 是 单线 程 编程 语言 ， 运 算 能 力 比较 弱 。HTMLS 新 增 的 Web Workers API 能 够 
创建 一 个 不 影响 前 台 处 理 的 后 台 线程 ,并 且 在 这 个 后 台 线 程 中 可 以 继续 创建 多 个 于 线程 ， 以 


帮助 JavaScript 实现 多 线程 运算 的 能 力 。 


【 学 习 重 点 】 

WI 创建 线程 对 象 。 

WI 使 用 Web Workers 通信 。 
WI 设计 多 线程 编程 页 面 。 
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8.1 Web Workers 基础 


通过 Web Workers， 用 户 可 以 将 耗 时 较 长 的 处 理 交 给 后 台 线程 去 运行 ， 从 而 解决 了 HTMLS 之 前 | 
因为 某 个 处 理 耗 时 过 长 而 出 现 的 “假死 ”现象 


8.1.1 认识 Web Workers | 


HTMLS 新 增 Web Workers API， 该 API 可 以 帮助 用 户 创建 在 后 台 运 行 的 线程 ， 这 个 线程 被 称 为 | 
worker， 如 果 将 可 能 耗费 较 长 时 间 的 处 理 交 给 后 台 去 执行 的 话 ， 对 用 户 在 前 台 页 面 中 执行 的 操作 就 没 | 
有 影响 。 

尽管 Web Workers 功能 强大 ， 但 也 不 是 万 能 的 ， 有 些 事情 它 还 做 不 到 。 例 如 ， 在 Web Workers 中 | 
执行 的 脚本 不 能 访问 该 页 面 的 window 对 象 , 因此 Web Workers 不 能 直接 访问 Web 页 面 和 DOMAPI， | 
虽然 Web Workers 不 会 导致 浏览 器 UI 停止 响应 , 但 是 仍然 会 消耗 CPU 周期 , 导致 系统 反应 速度 变 慢 。 | 

如 果 开 发 人 员 创 建 的 Web 应 用 程序 需要 执行 一 些 后 台数 据 处 理 ， 但 又 不 希望 这 些 数据 处 理 任务 
影响 Web 页 面 本 身 的 交互 性 , 那么 可 以 通过 Web Workers 生成 一 个 Web Worker 去 执行 数据 处 理 任务 。 
同时 添加 一 个 事件 监听 器 进行 监听 ， 并 与 之 进行 数据 交互 。 

Web Workers 另 一 个 用 途 : 监听 后 台 服 务 器 广播 的 消息 ， 收 到 后 台 服务 器 的 消息 后 ， 将 其 显示 在 
Web 页 面 上 。 这 种 与 后 台 服 务 器 对 话 的 场景 ， 可 能 会 用 到 Web Sockets 或 Server-Sent 事件 。 

Web Workers 可 执行 的 操作 : 

加 载 一 个 JavaScript 文件 ， 进 行 大 量 的 复杂 计算 ， 而 不 挂 起 主 进程 ， 并 通过 postMessage，onmessage 
进行 通信 。 

可 以 在 worker 中 通过 importScriptsCurl) 方 法 加 载 JavaScript 脚本 文件 。 

可 以 使 用 setTimeout()、clearTimeout()、setInterval0 和 clearInterval()。 

可 以 使 用 XMLHttpRequest 进行 异步 请 求 。 

可 以 访问 navigator 的 部 分 属性 。 

可 以 使 用 JavaScript 核心 对 象 。 | 

Web Workers 不 可 执行 的 操作 : 

不 能 跨 域 加 载 JavaScript。 

Worker 内 代码 不 能 访问 DOM。 如 果 改 变 DOM， 只 能 通过 返回 消息 给 创建 者 的 回调 函数 进行 处 理 。 
各 个 浏览 器 对 Worker 的 实现 还 没有 完全 完善 。 不 是 每 个 浏览 器 都 支持 所 有 新 特性 。 

使 用 Web Workers 加 载 数据 没有 JSONP 和 Ajax 加 载 数据 高 效 。 | 

各 浏览 器 对 HTML5 Web Workers 的 支持 情况 如 表 8.1 所 示 ， 从 中 可 以 看 到 目前 浏览 器 对 Web | 
Workers 的 支持 情况 各 不 相同 ， 但 Web Workers 已 经 得 到 了 大 部 分 主流 浏览 器 的 支持 ， 并 且 仍 在 持续 | 
更 新 发 展 中 。 








表 8.1 浏览 器 支持 概述 


浏 览 器 说 明 
ET 


正 不 支持 
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| Y 
| 续 表 
| 浏 览 器 说 了 明 
| Firefox | 3.5 及 以 上 的 版 本 支持 
| Opera 10.6 及 以 上 的 版 本 支持 
Chrome 3.0 及 以 上 的 版 本 支持 
Safari 4.0 及 以 上 的 版 本 支持 





| 在 调用 Web Workers API 函数 之 前 。 应 该 确认 当前 浏览 器 是 否 支 持 。 如 果 不 支 持 ， 可 以 提供 一 些 
| 备用 信息 ， 提 醒 用 户 使 用 最 新 的 浏览 
【示例 】 下 面 代码 可 以 用 来 测试 浏览 器 是 否 支持 。 
function testWorkerO { 
if (typeof(Worker) ! 一 "undefined") { 
document.getElementById("support").innerHTML = "浏览 器 支持 HTML5 Web Workers"; 
} 
} 
在 上 面 代码 中 ， 使 用 testWorkerO 函 数 来 检测 浏览 器 的 支持 情况 ， 可 在 页 面 加 载 时 调用 该 函数 。 
调用 typeof(Worker) 会 返回 全 局 window 对 象 的 Worker 属性 , 如 果 浏 览 器 不 支持 Web Workers API， 则 
| 返回 结果 将 是 undefined。 上 面 代码 在 检测 了 浏览 器 支持 性 之 后 ， 会 将 检测 结果 反馈 到 页 面 上 。 


8.1.2 创建 Web Workers 


| 调用 Worker 构造 函数 可 以 创建 一 个 worker (线程 )。Workers 在 初始 化 时 会 接收 一 个 URL 参数 ， 
| 参数 URI 表示 要 执行 的 脚本 文件 地 址 ， 其 中 包含 了 供 Worker 执行 的 代码 。 
| worker = new Worker("echoWorker.js"): 


当 创 建 Worker 对 象 后 ，Web Workers 就 可 以 通过 postMessage0 方 法 向 任务 池 发 送 任务 请 求 ， 执 
行 完 之 后 再 通过 postMessage() 返 回 消息 给 创建 者 指定 的 事件 处 理 程序 , 然后 通过 onmessage 捕获 返回 
消息 ， 实 现 前 后 台数 据 的 交互 。 
【示例 1】 如 果 获 取 worker 进程 的 返回 值 ， 可 以 通过 onmessage 事件 处 理 程序 进行 监听 。 
Var myWorker = new Worker(easyuijs): 
myWorker.onmessage = function(even) { 
alert(Called back by the worker!"): 

















可 

在 上 面 代 码 中 ， 第 一 行 代码 将 创建 和 运行 worker 进程 ， 第 二 行 设置 worker 的 onmessage 属性 ， 
绑 定 事件 ， 当 worker 的 postMessage( 方 法 被 调用 时 ， 这 个 被 绑 定 的 函数 就 会 被 调用 。 

对 于 由 多 个 JavaScript 文件 组 成 的 应 用 程序 来 说 ， 可 以 通过 包含 script 元 素 的 方式 ， 在 页 面 加 载 
的 时 候 同 步 加 载 JavaScript 文件 。 由 于 Web Workers 没有 访问 document 对 象 的 权限 ， 所 以 Worker 只 
能 使 用 importScripts0 方 法 导入 其 他 JavaScript 文件 。 

importScripts0 是 全 局 函数 ， 该 函数 可 以 将 脚本 或 库 导入 它们 的 作用 域 中 ， 导 入 的 JavaScript 文件 
只 会 在 某 一 个 已 有 的 Worker 中 加 载 和 执行 。 多 个 脚本 的 导入 同样 也 可 以 使 用 importScripts0 函 数 ， 它 
们 会 按 顺 序 执行 。 

【示例 2】importScripts0 可 以 接收 空 的 参数 或 多 个 脚本 URI 人 参数， 下面 形 式 都 是 合法 的 : 
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importScripts|); 
importScripts('foo.js"): 
importScripts(foojsvbarjs): 
JavaScript 会 加 载 列 出 每 一 个 脚本 文件 ， 然 后 运行 并 初始 化 。 这 些 脚 本 中 的 任何 全 局 对 象 都 可 以 | 
被 worker 使 用 。 | 
< 注意 : importSeripts0 方 法 下 载 脚本 顺序 可 能 不 一 样 ， 但 执行 的 顺序 一 定 是 按 importScripts0 方 法 | 
中 列 出 的 顺序 进行 ， 而 且 是 同步 的 ， 在 所 有 脚本 加 载 完 并 运行 结束 后 importScripts0 才 会 | 
返回 。 
Web Workers 能 够 堪 套 使 用 ， 以 创建 子 Worker: 
Var subWorker = new Worker("subWorker.js"): 
用 户 可 以 创建 多 个 workers。 子 worker 必须 寄宿 于 同一 个 父 页 面 下 , 且 它 的 URI 必须 与 父 worker | 
的 地 址 同 源 ， 这 样 可 以 很 好 地 维持 它们 的 依赖 关系 。 
Web Workers 可 以 使 用 setTimeoutO0 和 setInterval()。 如 果 希 望 Web Workers 进程 周期 性 地 运行 而 不 | 
是 不 停 地 循环 下 去 的 话 ， 使 用 这 两 个 方法 非常 有 用 。 
< 注意 : 在 后 台 线程 中 是 不 能 访问 页 面 或 窗口 对 象 ， 此 时 如 果 在 后 台 线程 的 脚本 文件 中 使 用 
window 对 象 或 document 对 象 ， 则 会 引发 错误 。 
【示例 3】 用 户 可 以 通过 Worker 对 象 的 onmessage 事件 获取 后 台 线程 反馈 的 消息 。 


Worker.onmessage=function( event){ 
/处 理 收 到 的 消息 





} 


使 用 Worker 对 象 的 postMessage() 方 法 可 以 给 后 台 线 程 发 送 消 息 。 发 送 的 消息 是 文本 数据 ， 但 也 
可 以 是 任何 JavaScript 对 象 ， 需 要 通过 JSON 对 象 的 stringify0 方 法 将 其 转换 成 文本 数据 。 

‘worker.postMessage(meseage): 

通过 获取 Worker 对 象 的 onmessage 事件 句柄 及 Worker 对 象 的 postMessage( 方 法 可 以 实现 线程 内 | 
部 的 消息 接收 和 发 送 。 

【拓展 】 

在 使 用 Web Workers 之 前 , 用 户 应 该 熟悉 线程 中 可 用 的 变量 、 函 数 与 类 。 在 线程 调用 的 JavaScript | 
脚本 文件 中 所 有 可 用 的 变量 、 函 数 和 类 说 明 如 下 所 示 。 
self: self 关键 字 用 来 表示 本 线程 范围 内 的 作用 域 。 
postMessage(meseage): 向 创建 线程 的 源 窗口 发 送 消息 。 
onmessage: 获取 接收 消息 的 事件 句柄 。 
importScripts(urls): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 该 脚本 文件 的 URL 地 址 ， 可 以 导 | 
入 多 个 脚本 文件 。 导 入 的 脚本 文件 必须 与 使 用 该 线程 文件 的 页 面 在 同一 个 域 中 ， 并 在 同一 | 
个 端口 中 。 
importScripts("worker.js","workerl.js","worker2.js"); 
navigator 对 象 : 与 window.navigator 对 象 类 似 ,具有 appName、platform、userAgent、appVersion | 
属性 。 它 们 可 以 用 来 标识 浏览 器 的 字符 。 





办 办 办 办 


办 办 
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sessionStorage/localStorage: 在 线程 中 可 以 使 用 Web Storage。 
XMLHttpRequest: 在 线程 中 可 以 处 理 Ajax 请 求 。 

Web Workers: 在 线程 中 可 以 嵌 套 线程 。 

setTimeout()/setInterval0: 在 线程 中 可 以 实现 定时 处 理 。 

close: 结束 本 线程 。 

eval0、isNaNO、escape(0 等 : 可 以 使 用 所 有 JavaScript 核心 函数 。 
object: 可 以 创建 和 使 用 本 地 对 象 。 

WebSockets: 可 以 使 用 Web Sockets API 向 服务 器 发 送 和 接收 信息 。 


| 8.1.3 Workers 通信 


使 用 后 台 线 程 时 不 能 访问 页 面 或 窗口 对 象 ， 但 是 并 不 代表 后 台 线 程 不 能 与 页 面 之 间 进行 数据 交 
| 互 。 为 了 实现 页 面 与 Web Workers 通信 ， 可 以 调用 postMessage0 函 数 传 入 所 需 数 据 。 同 时 将 建立 一 个 
| 监听 器 ， 用 来 监听 由 Web Workers 发 送 到 页 面 的 消息 。 为 建立 页 面 和 Web Workers 之 间 的 通信 ， 首 先 
| 在 页 面 中 添加 对 postMessage() 函 数 的 调用 ， 如 下 所 示 。 
document.getElementById("helloButton").onclick = functionO { 

worker.postMessage(" 你 好 "): 


因 办 办 办 办 办 凶 凶 


} 
| 当 用 户 单 击 按钮 后 ， 相 应 信息 会 被 发 送 给 Web Workers， 然 后 将 事件 监听 器 添加 到 页 面 中 ， 用 来 
| 监听 从 Web Workers 发 来 的 信息 。 

WorkeraddEventListener("message", messageHandler, true); 

function messageHandler(e) { 

// 来 自 worker 的 处 理 信息 

出 

编写 HTML5 Web Workers JavaScript 文件 。 在 该 文件 中 , 需要 添加 事件 监听 器 以 监听 发 来 的 消息 ， 
并 且 通 过 调用 postMessage0 函 数 实现 与 页 面 之 间 的 通信 。 
| 为 了 完成 页 面 与 Web Worker 之 间 的 通信 功能 ， 首 先 ， 添 加 代码 调用 postMessage0 〇 函数 。 例 如 ， 
| 在 messageHandler0 函 数 中 可 以 添加 如 下 代码 。 
function messageHandler(e) { 

postMessage("worker 说 : "+e.data + "too"): 
} 
接 下 来 ， 在 Web Workers JavaScript 文件 中 添加 事件 监听 器 ， 以 处 理 从 页 面 发 来 的 信息 : 
addEventListener("message". messageHandler. true): 


接收 到 信息 后 会 马上 调用 messageHandler0 函 数 以 保证 信息 能 及 时 返回 。 
通过 postMessage0 〇 函数 将 对 象 传递 到 workers 或 者 从 中 返回 对 象 ,这 些 对 象 将 被 自动 转换 为 JSON 





Var onmessage = function(e){ 
postMessage(e.data): 
上 


| < 全 注意 : 在 workers 中 进出 的 对 象 不 能 包含 函数 和 循环 引用 ， 因 为 JSON 不 支持 它们 。 
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在 Web Workers 脚本 中 如 果 发 生 未 处 理 的 错误 ， 会 引发 Web Workers 对 象 的 错误 事件 。 特 别 是 在 | 
调试 用 到 Web Workers 脚本 时 ， 对 错误 事件 的 监听 就 显得 尤为 重要 。 下 面 显示 的 是 Web Workers | 
JavaScript 文件 中 的 错误 处 理 函 数 ， 它 将 错误 记录 在 控制 台 上 。 | 

function errorHandler(e) { 

console.log(e.messapge. e): 
} 
为 了 处 理 错误 ， 还 必须 在 主页 上 添加 一 个 事件 监听 器 : 
‘worker.addEventListener("error", errorHandler true):; 

当 worker 发 生 运行 时 错误 时 ， 它 的 onerror 事件 就 会 被 触发 。 该 事件 接收 一 个 error 的 事件 ， 该 | 
事件 不 会 冒 泡 , 并 且 可 以 取消 。 要 取消 该 事件 可 以 使 用 preventDefault0 方 法 。 该 错误 事件 有 3 个 属性 :| 
message: 可 读 的 错误 信息 。 
filename: 发 生 错误 的 脚本 文件 名 称 。 
lineno: 发 生 错 误 的 脚本 所 在 文件 的 行 数 。 | 

Web Workers 不 能 自行 终止 ， 但 能 够 被 启用 它们 的 页 面 所 终止 。 调 用 terminate0 函 数 可 以 终止 后 | 
台 进 程 。 被 终止 的 Web Workers 将 不 再 响应 任何 信息 或 者 执行 任何 其 他 的 计算 。 终 止 之 后 ，Worker | 
不 能 被 重新 启动 ， 但 可 以 使 用 同样 的 URL 创建 一 个 新 的 Worker。 





worker.terminate():; 
如 果 需 要 马上 终止 一 个 正在 运行 中 的 worker， 你 可 以 调用 它 的 terminate0 方 法 : 
InYWorkerterminateO: 


这 样 一 个 worker 进程 就 结束 了 。 
8.1.4 使 用 Web Workers 


【示例 1】 下 面 示例 演示 了 如 何 使 用 Web Workers 在 控制 台 显示 一 个 提示 信息 。 
首先 ， 设 计 主 页 面 代码 (index.html)。 
<ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<Sscript type="text/javascript"> 
//Web 页 主线 程 
/创建 一 个 Worker 对 象 并 向 它 传递 将 在 新 线程 中 执行 的 脚本 的 URL 
Var worker = new Worker("worker.js"): 
WorkerpostMessage("hello world"):// 向 worker 发 送 数据 
worker.onmessage = function(evt) {// 接 收 worker 传 过 来 的 数据 函数 
console.log(evt.data):// 输 出 worker 发 送 来 的 数据 





} 
</script> 
</head> 


</html> 
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下 面 是 线程 脚本 文件 workerjs 代码 : 


onmessage = function(evt) { 
var d=evtdata:// 通 过 evt.data 获得 发 送 来 的 数据 
postMessage(d):// 将 获取 到 的 数据 发 送 回 主线 程 
} 


在 Chrome 浏览 器 中 访问 主页 文件 ， 则 可 以 在 控制 台中 看 到 输出 的 信息 ， 表 示 程 序 执行 成 功 ， 如 


图 8.1 所 示 。 


© Er rd| 


文人 (有 各 3%(N) 各 S| 吾 看 (VY) 画像 [) 委 存 (C) 工 RIT 验证 (A) | 
济 蜂 器 模式 : IE10(5) 文 村 模式 (M: 硬 三 一休 x 
HTML CSS | 控制 台 | 册 节 这 吾 医 网 二 





图 8.1 在 控制 台中 查看 信息 
通过 上 面 示例 可 以 看 到 使 用 Web Workers 应 该 包括 下 面 两 部 分 : 


定义 主页 线程 


> ”通过 worker = new Worker(url) 加 载 一 个 JavaScript 文件 ， 创 建 一 个 Worker， 同 时 返回 
-个 worker 实例 。 
> ”通过 worker.postMessage(data) 方 法 向 worker 发 送 数据 。 
> ” 绑 定 worker.onmessage 事件 接收 worker 响应 的 数据 。 
> ”使 用 worker.terminate0 可 以 终止 一 个 worker 执行 。 
义 Worker 线程 

> ”通过 postMessage(data) 方 法 向 主线 程 发 送 数 据 。 
> ” 绑 定 onmessage 事件 接收 主线 程 发 送 过 来 的 数据 。 

【示例 2】 下 面 示例 演示 如 何 创建 Web Workers， 手 动 控 制 Web Workers 与 页 面 进行 通信 的 一 般 





方法 ， 同 时 设置 如 何 处 理 异常 ， 以 及 如 何 停 止 Worker 任务 处 理 。 


首先 ， 设 计 主 页 文件 (index.html)， 并 在 该 文件 脚本 中 定义 一 个 主线 程 。 


<p id="support"> 你 的 浏览 器 不 支持 HTML5 Web Workers</p> 
<button id="stopButton" > 停止 任务 </button> 
<button id="helloButton" > 发 送 消息 </button> 
<script> 
function stopWorker0 { // 终 止 线程 
worker.terminate():; 
} 
function messageHandler(e) { // 显 示 线程 响应 信息 
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console.log(e.data): 
} | 
function errorHandler(e) { // 线 程 错误 处 理 | 
console.warn(e.message, e):; | 


a 


function loadDemoO { | 
It typeof (Worken) 1— "undefined") { 
document.getElementById("support").innerHTML = "你 的 浏览 器 支持 HTML5 Web Workers"; 
worker = new Worker("workerjs"): | 
worker.addEventListener("message". messageHandler true): | 
worker.addEventListener("error", errorHandler true): 
document.getElementById("helloButton").onclick = function| { 
worker.postMessage("ok"): 





| 
document.getElementById("stopButton").onclick = stopWorker: 
} 
} 
window.addEventListener("load". loadDemo. true); 
</script> 
然后 ， 设 计 线 程 脚本 文件 (workerjs) 的 代码 : 
function messageHandler(e) { 
postMessage("worker says: " + e.data + " too"); 
} 
addEventListener("message". messageHandler true): 
在 主页 和 线程 文件 中 ， 分 别 使 用 addEventListener 方法 把 回调 函数 绑 定 到 线程 监听 事件 中 。 
最 后 ， 在 Chrome 浏览 器 中 访问 主页 文件 ， 单 击 “ 发 送 消息 ”按钮 ， 则 可 以 在 控制 台中 看 到 输出 
的 信息 ， 表 示 程 序 手动 控制 线程 交互 执行 成 功 ， 如 图 8.2 所 示 。 


Ee S htp://ocalhost/inde ~ 有 | 人 echoa 


文件 (下 找 IN) 禁 朋 (9) 查看 (V 图 像 人 生存 KC) 工具 0T) 验 汪 (AI) 
误 晤 如 异 式 IE10D) 文人 模式 (M} 标 站 一 中 x 

HTML ”CSS | 控制 台 。 谤 本 。 探查 回 网络 

区 


hello world | 





5 | 





8.2 在 控制 台中 查看 信息 


【示例 3】 使 用 addEventListener 方法 注册 后 台 线 程 的 响应 事件 比较 麻烦 ， 当 然 ， 我 们 也 可 以 把 
它 修改 为 下 面 这 种 传统 写法 。 
主线 程 脚本 (index.html) 
window.onload = fonction0 { 
这 typeof (Worken !{— "undefined") { 
document.getElementById("support").innerHTML = "你 的 浏览 器 支持 HTML5 Web Workers"; 
worker = new Worker("workerjis"): 
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worker.onmessage = function(e) { 
console.log(e.data); 
上 
Worker onerror = function(e) { 
全 站 | console.wam(e.message, e); 
人 天 | } 
document.getElementById("helloButton").onclick = functionO { 
worker.postMessage("ok"): 
| } 


document.getElementById("stopButton").onclick = functionO { 
worker.terminate(): 


Worker 线程 文件 (workerjs) 


onmessage = function(e) { 
postMessage("worker says: " + e.data ); 


82 案例 实战 


本 节 将 通过 多 个 实例 演示 如 何 灵 活 应 用 Web Workers， 实 现 并 发 式 应 用 程序 开发 。 
8.2.1 求 和 运算 


本 示例 设计 一 个 文本 框 ， 允 许 用 户 在 该 文本 框 中 输入 数字 ， 然 后 单 击 按钮 ， 在 后 台 计 算 从 1 到 给 
定数 值 的 和 。 虽然 对 于 从 1 到 给 定数 值 的 求 和 计算 只 需要 用 一 个 求 和 公式 就 可 以 了 , 但 是 本 示例 中 为 
| 了 展示 后 台 线程 的 使 用 方法 ， 采 取 循环 计算 的 方法 。 





| 【示例 1】 为 了 方便 比较 单线 程 与 多 线程 的 运算 差异 ， 首 先 采 用 传统 方式 设计 一 个 单线 程 计算 页 
| 面 ， 主 要 代码 如 下 。 
<script type="text/javascript"> 
function calculateO { 

var num = parseInt(document.getElementById("num").value. 10): 

Var result = 0: 

for (vari=0:i<=num: 1) { 

result + 一 让 





后 + result+"。"): 
ee 
| 输入 数值 :<input type="text" id="num"> 
| <button onclick="calculate0"> 计 算 </button> 
| 保存 页 面 ， 然 后 在 浏览 器 中 预览 ， 执 行 上 面 这 段 代码 ， 在 文本 框 中 输入 数值 ， 然 后 单 击 “计算 ” 


wa02" 
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按钮 。 可 以 看 到 ,在 弹出 提示 对 话 框 之 前 ,， 用户 是 不 能 在 该 页 面 上 执行 操作 的 。 虽 然 在 文本 框 中 输入 | 
比较 小 的 值 时 ,不 会 有 什么 延迟 问题 , 但 是 当 用 户 在 该 文本 框 中 输入 特别 大 的 数字 ,浏览 器 运行 时 间 | 
明显 延迟 ， 如 图 8.3 所 示 。 | 








四 - = 
口 ecathosyindextLhtml x 
C © locahosVindexl ntml 廊 | 
输入 数值 :10000000000 EE 
| 
localhost 显示 : | 
合计 二 为 50000000000067850000。 
确定 





图 8.3 Safari 浏览 器 运行 效果 


| 
| 
【示例 2】 重 写 该 页 面 脚本 ， 使 用 Web Workers 把 页 面 中 比较 耗 时 的 运算 放 在 后 台 运 行 ， 这 样 在 | 
上 例 的 文本 框 中 无 论 输入 多 么 大 的 数值 都 可 以 正常 运算 了 。 | 
第 1 步 ， 设 计 主页 面 ， 在 该 页 面 中 创建 一 个 Worker， 然 后 导入 汇总 计算 的 外 部 JavaScript 文件 。 

通过 postMessage0 方 法 将 用 户 输入 的 数字 传递 给 Worker， 并 通过 onmessage 事件 回调 函数 接收 运算 
的 结果 。 

<script type="text/javascript"> 

var worker = new Worker("SumCalculate.js");// 创 建 执行 运算 的 线程 

worker.onmessage = function(event) {// 接 收 从 线程 中 传 出 的 计算 结果 

alert(" 合 计 值 为 "+ event.data + "。"); 














上 

function calculateO { 
Var num = parseInt(document.getElementById("num").value, 10); 
worker.postMessage(num); // 将 数值 传 给 线程 

} 

</script> 





输入 数值 :<input type="text" id="num"> 
<button onclick="calculate0"> 计 算 </button> 


第 2 步 ， 对 于 给 定 值 的 求 和 运算 放 到 线程 中 单独 执行 ， 且 把 线程 代码 单独 存储 在 SumCalculatejs 
脚本 文件 中 。 


onmessage = function(event) { 
Var num = event.data; 
Var result = 0; 
for (vari= 0;i<= num; i++) 
result +=i; 
PpostMessage(result); // 向 线程 创建 源 送 回 消息 


} 


第 3 步 ， 在 支持 Web Workers 的 浏览 器 中 预览 ， 如 Firefox、Safari、Chrome、Opera 等 浏览 器 ， 
在 Firefox 中 的 运行 结果 如 图 8.4 所 示 。 
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男 5 
示例 效果 8.4 Firefox 浏览 器 多 线程 运行 效果 


8.2.2 过滤 运 算 


本 示例 设计 在 页 面 上 随机 生成 一 个 整数 的 数组 ,然后 将 该 整数 数组 传 入 线程 ， 让 后 台 帮 助 挑选 出 
| 该 数组 中 可 以 被 3 整除 的 数字 , 然后 显示 在 页 面 表格 中 。 读者 可 以 借助 这 种 设计 思路 , 实现 把 字符 串 、 
| 数组 、 列 表 中 的 数据 都 采取 该 方法 显示 在 页 面 表格 、 表 单 控件 甚至 统计 图 中 。 

| 【操作 步 又】 

| 第 1 步 ， 设 计 前 台 页 面 代码 ， 该 页 面 的 HTML 代码 部 分 包含 一 个 空白 表格 ， 在 前 台 脚本 中 随机 
| 生成 整数 数组 ， 然 后 送 到 后 台 线 程 挑选 出 能 够 被 3 整除 的 数字 ， 再 传 回 前 台 脚 本 ， 在 前 台 脚本 中 根据 
| 挑选 结果 动态 创建 表格 中 的 行 、 列 ， 并 将 挑选 出 来 的 数字 显示 在 表格 中 。 


<style type= "text/css"> 
body { font: normal 11px auto "Trebuchet MS", Verdana. Arial. Helvetica, sans-serif color: #4f6b72: background: 
#E6EAE9: } 
table { width: 700px: padding: 0: margin: 0: } 
td { border-right: lpx solid #C1DAD7: border-bottom: lpx solid #C1DAD7: background: #fff: font-size:11pX: 
padding: 6px 6px 6px 12px: color: #4f6b72: text-align:center: } 
</style> 
‘<script type="text/javascript"> 
var intArray=new Array(200):// 随 机 数组 
Var intStr=""; 
/生成 200 个 随机 数 
for(var 二 0:i<200:iHH){ 
intArray[i]j=parseInt(Math randomO*200): 
iit=0) 
| intStrt=":": /用 分 号 作为 随机 数组 的 分 隔 符 
| intStr+=intArray[i]: 
| 
| 


} 

// 向 后 台 线 程 提交 随机 数组 

Var worker = new Worker("script.js"): 

‘worker.postMessage(intStr): 

/从 线程 中 取得 计算 结果 

worker.onmessage = function(event) { 
iflevent.data!="") { 

| VarjJetrtd: 

| var intArray=event.data.split(":"): 

| 

| 











var table=document.getElementById("table"): 
for(var i=0:i<intArray.length:i++){ 
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j=parseInt(i/10.0): 

k=1%10; 

ifk 一 0) {// 如 果 该 行 不 存在 ， 则 添加 行 
tr=document.createElement("tr"): 
trid="tr"+]; 
table.appendChild(tr): 


1 

else {// 如 果 该 行 存在 ， 则 获取 该 行 
tr=document.getElementById("tr"+j); | 

| 

td=document.createElement("td"): 





} 
上 
</script> 


<table id="table"></table> 
第 2 步 ， 将 后 台 线程 中 需要 处 理 的 任务 代码 存放 在 脚本 文件 scriptjs 中 ， 详 细 代码 如 下 。 


onmessage = function(event) { 
Var data = event.data: 
Var returnStr; 
Var intArray=data.split(":"): 
returnStr="; 


for(var i=0;i<intArray.length:i++){ 
iftparseInt(intArray[i])%3—0) { 
if(returnStr!="") 
TetumStr+=";"; 
returnStr+=intArray[i]: 
} 
} 
postMessage(returnStr): /返回 3 的 倍数 拼接 成 的 字符 串 


} 
第 3 步 ， 在 浏览 器 中 预览 ， 运 行 结果 如 图 8.5 所 示 。 





httpy/flocalhossindexhtml XC 


localhost /noe nirl 





8.5 ”在 后 台 过 滤 值 示 创 效果 
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党 8.2.3 ”并 发 运算 

本 示例 将 在 8.2.2 节 示 例 基础 上 ， 把 主页 脚本 中 随机 生成 数组 的 工作 放 到 后 台 线 
程 中 , 然后 使 用 另 一 个 子 线程 在 随机 数组 中 挑选 可 以 被 3 整除 的 数字 。 对 于 数组 的 传 
递 以 及 挑选 结果 的 传递 均 采 用 JSON 对 象 来 进行 转换 , 以 验证 是 否 能 在 线程 之 间 进 行 
a i JavaScript 对 象 的 传递 工作 。 
bet 具体 操作 步骤 请 扫 码 学 习 。 


8.2.4 多 运算 通信 


本 示例 继续 在 前 面 示 例 基础 上 , 将 创建 随机 数组 的 工作 也 放 到 了 一 个 单独 的 子 线程 中 , 在 该 线程 
| 中 创建 随机 数组 ， 然 后 将 随机 数组 传递 到 另 一 个 子 线程 中 进行 能 够 被 3 整除 的 数字 挑选 工作 ,最 后 把 
| 挑选 结果 传递 回 主页 面 进行 显示 。 
| 设计 思路 : 
当主 线程 嵌 套 多 个 子 线程 时 ， 子 线程 之 间 可 以 通过 下 面 几 个 步骤 进行 通信 。 

第 1 步 ， 先 创建 发 送 数据 的 子 线程 。 

第 2 步 ， 执 行 子 线程 中 的 任务 ， 然 后 把 要 传递 的 数据 发 送 给 主线 程 。 

第 3 步 ,在 主线 程 接收 到 子 线程 传 回来 的 消息 时 ， 创 建 接收 数据 的 子 线程 ， 然 后 
把 发 送 数据 的 子 线程 中 返回 的 消息 传递 给 接收 数据 的 子 线程 。 

第 4 步 ， 执 行 接收 数据 子 线程 中 的 代码 。 

具体 操作 步骤 请 扫 码 学 习 。 


8.2.5 ”数列 运算 


| 由 于 JavaScript 是 单线 程 执行 的 ， 在 求 数列 的 过 程 中 浏览 器 不 能 执行 其 他 脚本 ，UI 渲染 线程 也 会 
| 被 挂 起 ， 从 而 导致 浏览 器 进入 “假死 ”状态 。 下 面 示例 尝试 使 用 Web Workers 将 数列 计算 过 程 放 入 一 
个 新 线程 里 ， 避 免 单线 程 计算 所 带 来 的 问题 。 运 行 示例 ,在 控制 台中 看 到 输出 的 信息 ， 如 图 8.6 所 示 。 








线 上 阅读 
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使 用 Web Worker 实现 Web 平台 上 的 多 线程 处 理 功 能 。 
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位 置信 息 


Geolocation API 是 HTMLS 新 增 的 地 理 位 置 应 用 程序 接口 ， 它 提供 了 一 个 可 以 准确 感知 
浏览 器 用 户 当前 位 置 的 方法 。 如 果 浏 览 器 支持 ， 且 设备 具有 定位 功能 ， 就 能 够 直接 使 用 这 组 
API 来 获取 当前 位 置信 息 。 该 Geolocation API 可 以 应 用 于 移动 设备 中 的 地 理 定位 , 多 放 用 户 


在 Web 应 用 程序 中 共享 位 置信 息 ， 使 其 能 够 享受 位 置 感知 服务 。 


【学 习 重 点 】 

MH 了 解 位 置信 息 。 

WI 使 用 Geolocation API。 

WH 根据 位 置信 息 设计 简单 的 定位 应 用 。 


全 
| 


A 


可 
9.1 Geolocation API 基础 


在 HIML5 Geolocation API 之 前 ， 基 于 卫 地 址 的 地 理 定 位 方法 是 获得 位 置信 息 的 唯一 方式 ， 但 
其 返回 的 位 置信 息 通常 并 不 靠 谱 。 基 于 IP 地 址 的 地 理 定位 的 实现 方式 是 ， 自 动 查找 用 户 的 他 地址， 
然后 检索 其 注册 的 物理 地 址 。 


| 9.1.1 Geolocation API 应 用 场景 


应 用 场景 1: 设计 一 个 Web 应 用 程序 ， 向 用 户 提供 附近 商店 打折 优惠 信息 。 使 用 HTML5 
Geolocation API, 可 以 请 求 用 户 共享 他 们 的 位 置 ， 如 果 他 们 同意 , 应 用 程序 就 可 以 向 其 提供 相关 信息 ， 
告诉 用 户 去 附近 哪 家 商店 可 以 挑选 到 打折 的 商品 。 

应 用 场景 2: 构建 计算 行走 (跑步) 路 程 的 应 用 程序 。 想 象 一 下 ， 在 开始 跑步 时 通过 手机 浏览 器 
启动 应 用 程序 的 记录 功能 。 在 用 户 移动 过 程 中 ， 应 用 程序 会 记录 已 跑 过 的 距离 ， 还 可 以 把 跑步 过 程 对 
应 的 坐标 显示 在 地 图 上 ， 甚 至 可 以 显示 出 海拔 信息 。 如 果 用 户 正在 和 其 他 选手 一 起 参加 跑步 比赛 ， 应 
用 程序 甚至 可 以 显示 其 对 手 的 位 置 。 

应 用 场景 3: 基于 GPS 导航 的 社交 网 络 应 用 ， 可 以 用 它 看 到 好 友 们 当前 所 处 的 位 置 ， 如 知道 了 好 
友 的 方位 ， 就 可 以 挑选 合适 的 咖啡 馆 。 此 外 ， 还 有 很 多 特殊 的 应 用 。 


9.1.2 ”位 置信 息 来 源 


HTML5 Geolocation API 不 指定 设备 使 用 哪 种 底层 技术 来 定位 应 用 程序 的 用 户 。 相 反 ， 它 只 是 用 
于 检索 信息 的 API, 而 且 通 过 该 API 检索 到 的 数据 只 具有 某 种 程度 的 准确 性 。 它 并 不 能 保证 设备 返回 
的 实际 位 置 是 精确 的 。 设 备 可 以 使 用 下 列 数据 。 


全 地 址 。 
回 “三维 坐标 。 


> ”GPS 全 球 定位 系统 。 
> 从 RFID、Wi-Fi 和 蓝牙 到 Wi-Fi 的 MAC 地 址 。 
> ”GSM 或 CDMA 手机 的 ID。 
用 户 自 定义 数据 。 
为 了 保证 更 高 的 准确 度 ， 许 多 设备 使 用 一 个 或 多 个 数据 源 的 组 合 。 


9.1.3 ”位 置信 息 表 示 方 式 


位 置信 息 主要 由 一 对 纬度 和 经 度 坐 标 组 成 ， 例 如 : 
Latitude: 39.17222, Longitude: -120.13778 


在 这 里 ， 纬 度 〈 距 离 赤道 以 北 或 以 南 的 数值 表示 ) 是 39.17222， 经度 (距离 英国 格林 尼 治 以 东 或 
以 西 的 数值 表示 ) 是 120.13778， 经 纬度 坐标 可 以 用 以 下 两 种 方式 表示 : 

加 “十进制 格式 ， 如 39.17222。 

回 DMS 角度 格式 ， 如 39"20'。 

HTML5 Geolocation API 返回 坐标 的 格式 为 十 进 制 格式 。 
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除了 纬度 和 经 度 坐标 ，HIML5 Geolocation 还 提供 位 置 坐标 的 准确 度 ， 并 提供 其 他 一 些 元 数据 ， | 
有 具体 情况 取决 于 浏览 器 所 在 的 硬件 设备 ， 这 些 元 数据 包括 海拔 、 海 拔 准确 度 、 行 驶 方向 和 速度 等 。 如 | 
果 这 些 元 数据 不 存在 ， 则 返回 null。 | 


9.1.4 获取 位 置信 息 


HTML5 Geolocation API 的 使 用 方法 相当 简单 。 请 求 一 个 位 置信 息 ， 如 果 用 户 同意 ， 浏 览 器 就 会 | 
返回 位 置信 息 ， 该 位 置信 息 是 通过 支持 HTMLS5 地 理 定位 功能 的 底层 设备 。 例 如 ， 笔 记 本 电脑 或 手机 | 
提供 给 浏览 器 的 位 置信 息 由 纬度 、 经 度 坐 标 和 一 些 其 他 元 数据 组 成 。 有 了 这 些 位 置信 息 就 可 以 构建 引 | 
人 注目 的 位 置 感知 类 应 用 程序 。 | 

在 HTML5 中 ， 为 window.navigator 对 象 新 增 了 一 个 geolocation 属性 ， 可 以 使 用 Geolocation API | 
访问 该 属性 ，window.navigator 对 象 的 geolocation 属性 包含 三 种 方法 ， 利 用 这 些 方 法 可 以 实现 位 置信 | 
息 的 读 取 。 | 

使 用 getCurrentPosition 方法 可 以 取得 用 户 当 前 的 地 理 位 置信 息 ， 该 方法 的 用 法 如 下 所 示 。 

Void getCurrentPosition(onSuccess, onError, options) ; 


第 一 个 参数 为 获取 当前 地 理 位 置信 息 成 功 时 所 执行 的 回调 函数 , 第 二 个 参数 为 获取 当前 地 理 位 置 
信息 失败 时 所 执行 的 回调 函数 ， 第 三 个 参数 为 一 些 可 选 属性 的 列表 。 其 中 ， 第 二 、 三 个 参数 为 可 选 
属性 。 

getCurrentPosition 方法 中 的 第 一 个 参数 为 获取 当前 地 理 位 置信 息 成 功 时 所 执行 的 回调 函数 。 该 参 
数 的 使 用 方法 如 下 所 示 。 

navigator geolocation getCurrentPosition(function(position){ 

/获取 成 功 时 的 处 理 

} 


在 获取 地 理 位 置信 息 成 功 时 执行 的 回调 函数 中 用 到 了 一 个 参数 position， 它 代表 一 个 position 
对 象 。 

getCurrentPosition 方法 中 的 第 二 个 参数 为 获取 当前 地 理 位 置信 息 失败 时 所 执行 的 回调 函数 。 如 果 
获取 地 理 位 置信 息 失败 ， 可 以 通过 该 回调 函数 把 错误 信息 提示 给 用 户 。 当 在 浏览 器 中 打开 使 用 了 | 
Geolocation API 来 获得 用 户 当前 位 置信 息 的 页 面 时 ， 浏 览 器 会 询问 用 户 是 否 共享 位 置信 息 。 如 果 在 该 | 
画面 中 拒绝 共享 的 话 ， 也 会 引起 错误 的 发 生 。 | 











该 回调 函数 使 用 一 个 error 对 象 作为 参数 ， 该 对 象 具有 以 下 两 个 属性 : | 
回 code 属性 : code 属性 包含 三 个 值 ， 简 单 说 明 如 下 : | 
> ” 当 属 性 值 为 1 时 ， 表 示 用 户 拒 绝 了 位 置 服务 。 
> ” 当 属 性 值 为 2 时 ， 表 示 获 取 不 到 位 置信 息 。 
> ” 当 属 性 值 为 3 时， 表示 获取 信息 超时 错误 。 | 
回 message 属性 : 为 一 个 字符 串 ， 在 该 字符 串 中 包含 了 错误 信息 ， 这 个 错误 信息 在 开发 和 调试 | 
时 将 很 有 用 。 因 为 有 些 浏 览 器 中 不 支持 message 属性 ， 如 Firefox。 
在 getCurrentPosition 方法 中 使 用 第 二 个 参数 捕获 错误 信息 的 具体 使 用 方法 如 下 所 示 。 
navigator.geolocation.getCurrentPosition( 
fonction(position){ 
Var cords = position coords: 
showMap(coords.latitude. coords longitude .coords accuracy): 
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其 
/捕获 错误 信息 
function (erron){ 
Var errorTypes = { 
1: 位 置 服务 被 拒绝 
2: 获 取 不 到 位 置信 息 
3: 获 取信 息 超时 
} 
alert( errorTypes[error.code]+ ":. 不 能 确定 当前 地 理 位 置 "); 
} 


getCurrentPosition 方法 中 的 第 三 个 参数 可 以 省 略 ， 它 是 一 些 可 选 属性 的 列表 ， 这 些 可 选 属性 说 明 
如 下 。 

回 ”enableHighAccuracy 

是 否 要 求 高 精度 的 地 理 位 置信 息 ， 这 个 参数 在 很 多 设备 上 设置 了 都 没 用 ， 因 为 使 用 在 设备 上 时 需 
要 结合 设备 电量 、 具 体 地 理 情况 来 综合 考虑 。 因 此 ， 多 数 情况 下 把 该 属性 设 为 默认 ， 由 设备 自身 来 

回 timeout 

对 地 理 位 置信 息 的 获取 操作 做 一 个 超时 限制 (单位 为 毫秒 )。 如 果 在 该 时 间 内 未 获取 到 地 理 位 置 
信息 ， 则 返回 错误 。 

maximumAge 

对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 的 单位 为 毫秒 。 例 如 ，maximumAge : 120000 (1 分 钟 是 
60000 )， 如 果 10 点 整 的 时 候 获取 过 一 次 地 理 位 置信 息 ，10:01 的 时 候 ， 再 次 调用 
navigator.geolocation.getCurrentPosition 重新 获取 地 理 位 置信 息 ， 则 返回 的 依然 为 10:00 时 的 数据 ( 因 
为 设置 的 缓存 有 效 时 间 为 2 分 钟 )。 超 过 这 个 时 间 后 缓存 的 地 理 位 置信 息 被 废弃 ， 尝 试 重 新 获取 地 理 
位 置信 息 。 如 果 该 值 被 指定 为 0， 则 无 条 件 重 新 获取 新 的 地 理 位 置信 息 。 

对 于 这 些 可 选 属性 的 具体 设置 方法 如 下 所 示 。 

navigator.geolocation.getCurrentPoeition( 

function(position){ 
1/ 获取 地 理 位 置信 息 成 功 时 所 做 处 理 


} 
function(erron){ 
// 获 取 地 理 位 置信 息 失 败 时 所 做 处 理 


} 
// 以 下 为 可 选 属性 
{ 
// 设 缓存 有 效 时 间 为 2 分 钟 
i : 60*1000*2 


maximumAge: 
/5 秒 钟 内 未 获取 到 地 理 位 置信 息 则 返回 错误 
timeout: 5000 
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9.1.5 浏览 器 兼容 性 


各 浏览 器 对 HTML5 Geolocation 的 支持 程度 不 同 , 并 且 还 在 不 断 更 新 。 在 HTMLS 的 所 有 功能 中 ， | 
HIML5 Geolocation 是 第 一 批 被 全 部 接受 和 实现 的 功能 之 一 ， 这 对 于 开发 人 员 来 说 是 个 好 消息 。 相 关 | 
规范 已 达到 一 个 非常 成 熟 的 阶段 ， 不 大 可 能 做 大 的 改变 。 各 浏览 器 对 HTML5 Geolocation 的 支持 情况 ， 
如 表 9.1 所 示 。 





表 9.1 浏览 器 支持 概述 | 








浏 览 器 说 明 
正 | 通过 Gears 插件 支持 
Firefox | 3.5 及 以 上 的 版 本 支持 





10 及 以 上 的 版 本 支持 
2.0 及 以 上 的 版 本 支持 


4.0 及 以 上 的 版 本 支持 





由 于 浏览 器 对 它 的 支持 程度 不 同 ， 在 使 用 之 前 最 好 先 检查 浏览 器 是 否 支持 HTML5 Geolocation 
API， 确 保 浏览 器 支持 其 所 要 完成 的 所 有 工作 。 这 样 当 浏览 器 不 支持 时 ， 就 可 以 提供 一 些 替 代 文 本 ， 
以 提示 用 户 升级 浏览 器 或 安装 插件 来 增强 现 有 浏览 器 功能 。 

function loadDemoO { 
if(navigator.geolocation) { 
document.getElementById("support").innerHTML = "支持 HTML5 Geolocation"; 
}else{ 
document.getElementById("support").innerHTML = "当前 浏览 器 不 支持 HTML5 Geolocation"; 


} 
} 


在 上 面 代码 中 ，loadDemo0 函 数 测试 了 浏览 器 的 支持 情况 ， 这 个 函数 是 在 页 面 加 载 的 时 候 被 调用 | 
的 。 如 果 存 在 地 理 定位 对 象 ，navigator.geolocation 调用 将 返回 该 对 象 ， 否 则 将 触发 错误 。 页面 上 预先 | 
定义 的 support 元 素 会 根据 检测 结果 显示 支持 情况 的 提示 信息 。 
9.1.6 监测 位 置信 息 

使 用 watchCurrentPosition 方法 可 以 持续 获取 用 户 的 当前 地 理 位 置信 息 ， 它 会 定期 地 自动 获取 。 
watchCurrentPosition 方法 的 基本 语法 如 下 所 示 。 

int watchCurrentPosition(onSuccess, onEIrror. options) : | 

该 方法 参数 的 说 明 与 使 用 与 getCurrentPosition 方法 相同 。 调用 该 方法 后 会 返回 一 个 数字 , 这 个 数 | 
字 的 用 法 与 JavaScript 脚本 中 setInterval 方法 的 返回 值 用 法 类 似 ， 可 以 被 clearWatch 方法 使 用 ， 以 停 | 
止 对 当前 地 理 位 置信 息 的 监视 。 
9.1.7 ”停止 获取 位 置信 息 


使 用 clearWatch 方法 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 。 具 体 用 法 如 下 所 示 。 

















by 4 


到 yo wm 浊 芋 通 (项 名 本 二 用 ) 


void clearWatch(watchld): 

| 参数 watchId 为 调用 watchCurrentPosition 方法 监视 地 理 位 置信 息 时 的 返回 参数 。 
| 

| 


全 内 9.1.8 ”保护 隐私 


HTML5 Geolocation 规范 提供 了 一 套 保护 用 户 隐私 的 机 制 。 除 非得 到 用 户 明确 许可 ， 和 否则 不 可 获 
CE 
| 【操作 步骤 】 
| 第 1 步 ， 用 户 从 浏览 器 中 打开 位 置 感知 应 用 程序 。 
| 第 2 步 ， 应 用 程序 Web 页 面 加载 ， 然 后 通过 Geolocation 函数 调用 请 求 位 置 坐标 。 浏 览 器 拦截 这 
一 请 求 ， 然 后 请 求 用 户 授权 。 

第 3 步 ， 如 果 浏览 器 从 其 宿主 设备 中 检索 坐标 信息 ， 如 IP 地 址 、Wi-Fi 或 GPS 坐标 ， 这 是 浏览 
器 的 内 部 功能 。 

第 4 步 ， 浏 览 器 将 坐标 发 送 给 受信 任 的 外 部 定位 服务 ， 它 返回 一 个 详细 位 置信 息 ， 并 将 该 位 置信 
息 发 回 给 HTML5 Geolocation 应 用 程序 。 


这 提示 : 应 用 程序 不 能 直接 访问 设备 ， 它 只 能 请 求 浏览 器 来 代表 它 访问 设备 。 


访问 使 用 HTML5 Geolocation API 的 页 面 时 ， 会 触发 隐私 保护 机 制 。 如 果 仅仅 是 添加 HTML5 
Geolocation 代码 , 而 不 被 任何 方法 调用 , 则 不 会 触发 隐私 保护 机 制 .只 要 所 添加 的 HIML5 Geolocation 
代码 被 执行 , 浏览 器 就 会 提示 用 户 应 用 程序 要 共享 位 置 。 执行 HTML5 Geolocation 的 方式 很 多 。 例如 ， 
调用 navigator.geolocation.getCurrentPosition 方法 等 。 

除了 询问 用 户 是 否 允 许 共享 其 位 置 之 外 ，Firefox 等 一 些 浏览 器 还 可 以 让 用 户 选择 记 住 该 网 站 的 
位 置 服务 权限 ， 以 便 下 次 访问 的 时 候 不 再 弹出 提示 框 ， 类 似 在 浏览 器 中 记 住 某 些 网 站 的 密码 。 


9.1.9 处理 位 置信 息 


因为 位 置 数据 属于 敏感 信息 ， 所 以 接收 到 之 后 ， 必 须 小 心地 处 理 、 存 储 和 重 传 。 如 果 用 户 没 有 授 
权 存 储 这 些 数据 ， 那 么 应 用 程序 应 该 在 相应 任务 完成 后 立即 删除 。 如 果 要 重 传 位 置 数据 ， 建 议 先 对 其 
进行 加 密 。 在 收集 地 理 定位 数据 时 ， 应 用 程序 应 该 着 重 提 示 用 户 以 下 内 容 
会 收集 位 置 数据 。 
为 什么 收集 位 置 数据 。 
位 置 数据 将 保存 多 久 。 
怎样 保证 数据 的 安全 。 
如 果 用 户 同意 共享 ， 位 置 数据 怎样 共享 。 
用 户 怎样 检查 和 更 新 他 们 的 位 置 数据 。 


9.1.10 ”使 用 position 


如 果 获取 地 理 位 置信 息 成 功 ， 则 可 以 在 获取 成 功 后 的 回调 函数 中 通过 访问 position 对 象 的 属性 来 
| 得 到 这 些 地 理 位 置信 息 。position 对 象 具 有 如 下 属性 。 

| 包 latitude: 当前 地 理 位 置 的 纬度 。 

| 回 longitude: 当前 地 理 位 置 的 经 度 。 








加 加 加 加 网 加 





A 
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altitude: 当前 地 理 位 置 的 海拔 〈 不 能 获取 时 为 mnull) 。 
accuracy: 获取 到 的 纬度 或 经 度 的 精度 〈 以 米 为 单位 ) 。 
altitudeAccurancy: 获取 到 的 海拔 的 精度 〈 以 米 为 单位 ) 。 | 
heading: 设备 的 前 进 方向 。 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 (不 能 获取 时 为 null) 。 | 
speed: 设备 的 前 进 速度 〈 以 米 / 秒 为 单位 ， 不 能 获取 时 为 null) 。 | 
timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 
【示例 】 下 面 示例 使 用 getCurrentPosition 方法 获取 当前 位 置 的 地 理 信 息 ， 并 且 在 页 面 中 显示 | 
position 对 象 中 的 所 有 属性 。 | 
<script type="text/javascript" src=http://maps.google.com/maps/apiis?sensor=false></script> | 
<script type="text/javascript"> 
function showObject(obj,k){ /递归 显示 object 


回回 回回 图 加 








if(!obj) {return:} | 
for(var iin ob){ | 
if(typeof(obi[i])!="object" | obj[ij=—=nuD { | 

for(var 六 0j<kj+H{ | 

document write("&nbsp:&nbsp:&nbsp:&nbsp:"): | 

} | 

document write(i + " : "+ obj[i] + "<br/>"); | 

}else{ | 
document writeGi + " : "+ "<br/>"): | 
showObject(obij[i].k+1): | 

} | 

} | 

. | 
function get locationO{ | 
if(navigator.geolocation) | 


navigator.geolocation.getCurrentPosition(show map.handle error {enableHighAccuracy:true.maximumAge:1000}); 
else ”alert(" 你 的 浏览 器 不 支持 使 用 HTMLS5 来 获取 地 理 位 置信 息 。"); 
} 
function handle_error(err){ // 错 误 处 理 
switch(err.code){ 
Case 1 : 
alert(" 位 置 服务 被 拒绝 。"): 
break; 
Case 2: 
alert(" 暂 时 获取 不 到 位 置信 息 。"): 
break: 
Case 3: 
alert(" 获 取信 息 超 时 。"): 
break: 
default: 
alert(" 未 知 错误 。"): 
break: 


} 

} 

function show_map(position){ /显示 地 理 信 息 
var latitude = position.coords.latitude: 
Var longitude = position.coords.longitude: 
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showObject(position.0): 


会 扩 | <div id="map" style= "width:400px: height:400px"></div> 
Note | 这 段 代 码 运行 结果 在 不 同 设备 的 浏览 器 上 也 不 同 ， 具 体 运行 结果 取决 于 运行 浏览 器 的 设备 。 
Tf 





9.2 案例 : 设计 位 置地 图 


示例 效果 


| 
| 本 示例 介绍 如 何在 页 面 上 显示 一 幅 Google 地 图 ， 并 且 把 用 户 的 当前 地 理 位 置 标注 在 地 图 上 面 ， 
| 如 果 用 户 的 位 置 发 生 改变 ,将 把 之 前 在 地 图 上 的 标记 自动 更 新 到 新 的 位 置 上 。 当 然 , 要 在 页 面 中 使 用 
| Google 地 图 ， 需 要 使 用 到 Google Map API。 
【操作 步骤】 
| 第 1 步 ， 在 页 面 中 导入 Google Map API 的 脚本 文件 ， 导 入 方法 如 下 所 示 。 
| <script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false /> 
第 2 步 ， 设 定 地 图 参数 ， 设 定 方法 如 下 所 示 。 
| // 指 定 Google 地 图 上 的 一 个 坐标 点 ， 同 时 指定 该 坐标 点 的 横 坐 标 和 纵 坐标 
| varlating = new google.maps.LatLng(coords.latitude. coords.longitude): 
| varmyOptions={ 
| zoom: 14, // 设 定 放 大 倍数 
| center: lating, // 将 地 圈 中 心 点 设 定 为 指定 的 坐标 点 
| mapTypeld: google.maps.MapTypeIdROADMAP // 指 定 地 圈 类 型 
| 上 
| 本 例 将 用 户 当前 位 置 的 纬度 、 经 度 设 定 为 页 面 打开 时 Google 地 图 的 中 心 点 。 
| 第 3 步 ， 创 建 地 图 ， 并 在 页 面 中 显示 。 
| Var mapl= new google.maps.Map(document.getElementById("map"). myOptions): 
| 上 面 代 码 将 地 图 显示 在 id 为 map 的 div 元 素 中 。 
| 第 4 步 ， 在 地 图 上 创建 标记 。 
| Var marker = new google.maps.Marker({ 
| position: lating, // 将 前 面 指定 的 坐标 点 标注 出 来 

map: map1 /设置 在 mapl 变量 代表 的 地 图 中 标注 
D; 
第 5 步 ， 设 置 标注 窗口 并 指定 标注 窗口 中 注释 文字 。 
Var infowindow = new google.maps.InfoWindow({ 

content: "当前 位 置 !” // 指 定 标注 窗口 中 注释 文字 
D; 
第 6 步 ， 打 开标 注 窗口 。 
infowindow.open(map]1. marker): 
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示例 主要 代码 如 下 所 示 。 


<script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false></script> 
<script type="text/javascript"> 
function initO { 
// 取 得 当前 地 理 位 置 
navigator.geolocation.getCurrentPosition(function(position) { 
Var coords = position.coords; 
// 设 定 地 图 参数 ， 将 用 户 的 当前 位 置 的 纬度 、 经 度 设 定 为 地 图 的 中 心 点 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude): 
Var myOptions = { 
Zoom: 14, 
center: lating, 
mapTypeld: google.maps.MapTypeId. ROADMAP 


}; 
// 创 建 地 图 并 在 “map”div 中 显示 
Var mapl; 
mapl1= new google.maps.Map(document.getElementById("map"). myOptions): 
// 在 地 图 上 创建 标记 
Var marker = new google.maps.Marker({ 
position: latlng、 
Dy i 
// 设 定 标 注 窗口 ， 并 指定 该 窗口 中 的 注释 文字 


Var infowindow = new google.maps.InfoWindow( { | 
content: "当前 位 置 !" | 
| 





); 
/打开 标注 窗口 
infowindow.open(map1l, marker); | 
D; 
} 
</script> 
<body onload="initO"> 
<div id="map" style="width:400px: height:400px"></div> 





9.3 在 线 练 习 


使 用 HTML5 Geolocation API 来 获取 当前 位 置信 息 。 





在 线 练 习 
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历史 记录 


在 HTMLS 之 前 ， 使 用 JavaScript 实现 历史 记录 的 更 新 ， 都 会 触发 一 个 页 面 刷 新 ， 这 个 
更 新 过 程 将 耗费 大 量 时 间 和 资源 。 在 很 多 情况 下 ， 这 种 刷新 是 没有 必要 的 ， 它 会 导致 页 面 内 
容重 复 加 载 。HTMLS5 的 History API 多 许 在 不 刷新 页 面 的 前 提 下 ， 通 过 JavaScript 方式 更 新 
页 面 内 容 。 


【 学 习 重 点 】 
WI 正确 使 用 History API。 
MH 使 用 AjaxtHistory API 设计 无 刷新 页 面 。 
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10.1 History API 基础 


HTMLS 新 增 的 History API 的 主要 功能 是 更 新 历史 记录 , 但 不 需要 重新 加 载 页 面 ， 而 之 前 用 户 通 | 
过 window.location 更 新 页 面 的 URL 记录， 会 导致 整个 页 面 被 重新 加 载 。 


10.1.1 了 解 History API | 


History API 新 增 如 下 历史 记录 的 控制 功能 : 
加 ”允许 用 户 在 浏览 器 历史 记录 中 添加 项 目 。 | 
在 不 刷新 页 面 的 前 提 下 ， 人 允许 显 式 改变 浏览 器 地 址 栏 中 的 URL 地 址 。 | 
新 添 了 一 个 当 激 活 的 历史 记录 发 生 改变 时 触发 的 事件 ， 如 前 进 或 后 退 浏览 页 面 。 

通过 这 些 新 增 功能 和 事件 ， 可 以 实现 在 不 刷新 页 面 的 前 提 下 ， 动 态 改变 浏览 器 地 址 栏 中 的 URL 
地 址 ， 动 态 修改 页 面 所 显示 的 资源 。 

History API 执行 过 程 如 下 。 

第 1 步 ， 通 过 Ajax 向 服务 器 端 请 求 页 面 需要 更 新 的 信息 。 

第 2 步 ， 使 用 JavaScript 加 载 并 显示 更 新 的 页 面 信息 。 

第 3 步 ， 通 过 History API 在 不 刷新 页 面 的 前 提 下 ， 更 新 浏览 器 地 址 栏 中 的 URL 地 址 。 

在 整个 处 理 过 程 中 , 页 面 信息 得 到 更 新 , 浏览 器 的 地 址 栏 也 发 生 了 变化 , 但 是 页 面 并 没有 被 刷新 。 
实际 上 ，History API 的 诞生 ， 主 要 任务 就 是 为 了 解决 Ajax 技术 与 浏览 器 历史 记录 之 间 存在 的 冲突 。 
交 提示 : 完善 Ajax 与 History API 融合 ， 需 要 注意 两 个 问题 : 

将 Ajax 请 求 的 地 址 谈 入 <a> 标 记 的 href 属性 中 。 
加 ”确保 在 JavaScript 的 click 事件 处 理 程序 中 返回 tue， 这 样 当 用 户 使 用 中 键 单 击 或 命 
令 单 击 时 不 会 导致 程序 被 意外 履 盖 。 


目前 ， 正 10+、Firefox 4+、Chrome 8+、Safari 5+、Opera 11+ 等 主流 版 本 浏览 器 支持 HIML5 中 | 
的 History API。 | 


将 提示 : 如 果 只 修改 URL 中 的 hash ( 历史 记录 )， 则 不 会 导致 页 面 被 刷新 。 使 用 传统 的 hashbang | 
方法 可 以 改变 页 面 的 URL， 但 不 刷新 页 面 。Twitter 网 站 就 使 用 这 种 方法 ， 不 过 这 种 方法 
广 受 诉 病 ， 毕 竟 hash 在 location 中 并 不 被 作为 一 个 真正 的 资源 来 对 待 。2012 年 Twitter 抛 
弃 了 hashbang 方法 ， 推 出 pushstate0 方 法 ， 随 后 各 浏览 器 支持 了 这 个 规范 。 

如 果 想 大 范围 地 使 用 History API 技术 ， 可 以 考虑 使 用 一 些 专 有 的 工具 ， 如 pjax 
(https://github.com/defunkt/jquery-pjax)， 它 是 一 个 jQuery 插件 ， 使 用 它 可 以 大 大 提高 用 户 同时 使 用 

Ajax 和 pushState() 方 法 进行 开发 的 速度 ， 不 过 它 只 支持 那些 使 用 History API 接口 的 现代 浏览 器 。 
< 注意 : 对 于 不 支持 History API 接口 的 浏览 器 , 可 以 使 用 historyjs 进行 兼容 , 它 使 用 旧 的 URLhash | 
的 方式 来 实现 同样 的 功能 。 下 载 地 址 为 https://github.com/browserstate/history.js/。 











4 了 人 


gm yo A wm 汉 捕 通 (关外 本 冯 帮 ) 


| 
| | 10.1.2 ”使 用 History API 
| 


window 通过 History 对 象 提供 对 浏览 器 历史 记录 的 访问 能 力 , 允许 用 户 在 历史 记录 中 自由 前 进 和 
后退 ,而 在 HTMLS 中 ， 还 可 以 操纵 历史 记录 中 的 数据 。 


| 加 ”在 历史 记录 中 后 退 

TT ww 
| windowhistory.backO: 
| 这 行 代码 等 效 于 在 浏览 器 的 工具 栏 上 单 击 “ 返 回 ” 按 钮 。 
| 回 ”在 历史 记录 中 前 进 
| 实现 方法 如 下 : 
| window.history.forwardO: 
| 这 行 代码 等 效 于 在 浏览 器 中 单 击 “ 前 进 ” 按 钮 。 
| 移动 到 指定 的 历史 记录 点 
| 可 以 使 用 go0 方 法 从 当前 会 话 的 历史 记录 中 加 载 页 面 。 当 前 页 面 位 置 索引 值 为 0, 上 一 页 就 是 -1， 
| 下 一 页 为 1， 依 此 类 推 。 
| window.history.go(-1); /相当 于 调用 backO 
| ‘window.history.go(1): /相当 于 调用 forward0 
| length 属性 
| 使 用 length 属性 可 以 了 解 历史 记录 栈 中 一 共有 多 少 页 : 
| var numberOfEntries = window.history.length: 
| 添加 和 修改 历史 记录 条 目 
| HTMLS5 新 增 historypushSstate0 和 history.replaceState() 方 法 , 允许 用 户 逐 条 添加 和 修改 历史 记录 条 
| 目 。 使 用 history.pushState() 方 法 可 以 改变 referrer 的 值 ， 而 在 调用 该 方法 后 创建 的 XMLHttpRequest 
| 对 象 会 在 HITP 请 求 头 中 使 用 这 个 值 。referrer 的 值 则 是 创建 XMLHttpRequest 对 象 时 所 处 的 窗口 的 
| URL。 
| 【示例 】 假 设 http://mysite.com/foo.html 页 面 将 执行 下 面 JavaScript 代码 : 
| var stateObj = { foo: "bar" }: 
| history.pushState(stateObi, "page 2". "bar.html"): 
| 这 时 浏览 器 的 地 址 栏 将 显示 http://mysite.com/bar.html， 但 不 会 加 载 barhtml 页 面 ， 也 不 会 检查 
| barhtml 是 否 存 在 。 

如 果 现 在 用 户 导航 到 http://mysite.com/ 页 面 ， 然 后 单 击 后 退 按钮 ， 此 时 地 址 栏 将 会 显示 http:/ 
mysite.com/bar.html， 并 且 页 面 会 触发 popstate 事件 ， 该 事件 状态 对 象 会 包含 stateObj 的 一 个 副本 。 

如 果 再 次 单 击 后 退 按 钮 , URL 将 返回 http://mysite.com/foo.html, 文档 将 触发 男 一 个 popstate 事件 ， 
| 这 次 的 状态 对 象 为 null， 回 退 同样 不 会 改变 文档 内 容 。 

pushState0 方 法 

pushState0 方 法 包含 三 个 参数 ， 简 单 说 明 如 下 : 
第 1 个 参数 : 状态 对 象 。 
状态 对 象 是 一 个 JavaScript 对 象 直接 量 ， 与 调用 pushState0 方 法 创建 的 新 历史 记录 条 目 相 关联 。 
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无 论 何 时 用 户 导航 到 新 创建 的 状态 ,popstate 事件 都 会 被 触发 并且 事件 对 象 的 state 属性 都 包含 历史 | 

记录 条 目的 状态 对 象 的 副本 。 | 
第 2 个 参数 : 标题。 可 以 传 入 一 个 简短 的 标题 ， 标 明 将 要 进入 的 状态 。 | 
Firefox 浏览 器 目前 忽略 该 参数 ， 考 虑 到 未 来 可 能 会 对 该 方法 进行 修改 ， 传 一 个 空 字符 串 会 比较 | 

安全 。 | 

第 3 个 参数 ， 可 选 参 数 ， 新 的 历史 记录 条 目的 地 址 。 

浏览 器 不 会 在 调用 pushState0 方 法 后 加 载 该 地 址 ， 不 指定 的 话 则 为 文档 当前 URL。 


这 提示 : 调用 pushState0 方 法 ， 类 似 于 设置 window.location=#foo"， 它 们 都 会 在 当前 文档 内 创建 和 | 

激活 新 的 历史 记录 条 目 。 但 pushStateO0 有 自己 的 优势 : 

新 的 URL 可 以 是 任意 的 同 源 URL, 与 此 相反 ,使 用 window.location 方法 时 ， 只 有 仅 
修改 hash 才能 保证 停留 在 相同 的 document 中 。 

根据 个 人 需要 决定 是 否 修 改 URL。 相 反 ， 设 置 windowlocation=#foo'， 只 有 在 当前 
hash 值 不 是 foo 时 才 创建 一 条 新 历史 记录 。 

可 以 在 新 的 历史 记录 条 目 中 添加 抽象 数据 。 如 果 使 用 基于 hash 的 方法 ， 只 能 把 相关 | 
数据 转 码 成 一 个 很 短 的 字符 囊 。 


< 人 注意 : pushState() 方 法 永远 不 会 触发 hashchange 事件 。 


replaceState() 方 法 
history.replaceState() 与 history.pushState() 用 法 相同 ， 都 包含 3 个 相同 的 参数 。 
不 同 之 处 : 
pushState0 是 在 history 栈 中 添加 一 个 新 的 条 目 ，replaceState0 是 替换 当前 的 记录 值 。 例 如 ，history 
栈 中 有 两 个 栈 块 ， 一 个 标记 为 1， 另 一 个 标记 为 2， 现 在 有 第 三 个 栈 块 ， 标 记 为 3。 当 执行 pushStateO) 
时 ， 栈 块 3 将 被 添加 到 栈 中 ， 栈 就 有 3 个 栈 块 了 。 而 当 执 行 replaceState0 时 ， 将 使 用 栈 块 3 蔡 换 当前 
激活 的 栈 块 2，history 的 记录 条 数 不 变 。 
容 提示 : 为 了 响应 用 户 的 某 些 操作 ， 需 要 更 新 当前 历史 记录 条 目的 状态 对 象 或 URL 时 ， 使 用 
replaceState() 方 法 会 特别 合适 。 
popstate 事件 | 
每 当 激 活 的 历史 记录 发 生变 化 时 ， 都 会 触发 popstate 事件 。 如 果 被 激活 的 历史 记录 条 目 是 由 | 
pushState0 创 建 ， 或 者 是 被 replaceState() 方 法 蔡 换 的 ，popstate 事件 的 状态 属性 将 包含 历史 记录 的 状态 | 
对 象 的 一 个 副本 。 
< 所 注意 : 当 浏览 会 话 历史 记录 时 ， 不 管 是 单 击 浏览 器 工具 栏 中 “前 进 ” 或 者 “后 退 ” 按 钮 ， 还 是 使 | 
用 JavaScript 的 history.go0 和 history.back0 方 法 ，popstate 事件 都 会 被 触发 。 
回 ” 读 取 历 史 状 态 
在 页 面 加 载 时 ， 可 能 会 包含 一 个 非 空 的 状态 对 象 。 这 种 情况 是 会 发 生 的 ， 例 如 ， 如 果 页 面 中 使 用 | 
pushState0) 或 replaceState() 方 法 设置 了 一 个 状态 对 象 ， 然 后 重启 浏览 器 。 当 页 面 重 新 加 载 时 ， 页 面 会 } 
触发 onload 事件 ,但 不 会 触发 popstate 事件 .但 是 , 如果 读 取 history.state 属性 , 会 得 到 一 个 与 popstate | 
事件 触发 时 一 样 的 状态 对 象 。 
可 以 直接 读 取 当 前 历史 记录 条 目的 状态 ， 而 不 需要 等 待 popstate 事件 : 
Var currentState = history.state: 
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10.1.3 ”注意 事项 


实现 网 页 内 容 的 更 新 ， 第 二 ， 使 用 History API 实现 浏览 器 历史 记录 的 更 新 ， 第 三 ， 使 用 History API 

实时 跟踪 浏览 器 的 导航 响应 ， 实 现 当 浏览 器 的 历史 记录 发 生变 化 时 ， 页 面 内 容 也 应 随 之 更 新 。 

< 负 注意 ; 测试 本 章 示例 ， 用 户 需 要 搭建 一 个 Web 服务 器 ， 以 http://host/ 的 形式 去 访问 才能 生效 。 如 
果 在 本 地 测试 ， 以 file:/ 的 方式 在 浏览 器 打开 ， 就 会 出 现 如 下 的 问题 : 
Uncaught SecurityError: A history state object with URL ‘file:///C:/xxx/xxx/xxx/xxx.html' 
cannot be created in a document with origin ‘null'. 

因为 使 用 pushState0 方 法 修改 的 URL 与 当前 页 面 的 URL 必须 是 同 源 的 ， 而 fe:// 形 式 打开 的 页 
面 是 没有 origin 的 ， 所 以 会 报 该 错误 。 


10.2 案例 实战 


下 面 结合 几 个 案例 学 习 History API 的 具体 应 用 。 


10.2.1 设计 导航 页 面 


本 例 设计 一 个 无 刷新 页 面 导 航 ， 在 首页 (index.html) 包含 一 个 导航 列表 ， 当 用 户 单 击 不 同 的 列 
表 项 目 时 ， 首 页 (index.html) 的 内 容 容 器 (<div id="content"> ) 会 自动 更 新 内 容 ， 正 确 显示 对 应 目标 
页 面 的 HTML 内容， 同时 浏览 器 地 址 栏 正确 显示 目标 页 面 的 URL， 但 是 首页 并 没有 被 刷新 ， 而 不 是 
仅 显 示 目 标 页 面 。 演 示 效 果 如 图 10.1 所 示 。 
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© localhosta080/mysite/indexchtml € © © locahosteo0/mysite/newshrt 


History API 示 例 History API 示 例 


: 


» Conicct 


当前 内 容 页 : news. html 


baut 
contact 


当前 内 容 页 。 index. html 


calncctacgoymysteynewehtml 





(a) 显示 index.html 页 面 (b) 显示 news.html 页 面 
图 10.1 应 用 History API 


在 浏览 器 工具 栏 中 单 击 “ 后 退 ” 按 钮 ， 浏 览 器 能 够 正确 显示 上 一 次 单 击 的 链接 地 址 ， 虽 然 页 面 并 
没有 被 刷新 ， 同 时 地 址 栏 中 正确 显示 上 一 次 浏览 页 面 的 URL， 如 图 10.2 所 示 。 如 果 没 有 History API 
支持 ， 使 用 Ajax 实现 异步 请 求 时 ， 工 具 栏 中 的 “后 退 ” 按 钮 是 无 效 的 。 

如 果 在 工具 栏 中 单 击 “ 刷 新 ”按钮 ， 则 页 面 将 根据 地 址 栏 的 URL 信息 重新 刷新 页 面 ， 将 显示 独 
立 的 目标 页 面 ， 效 果 如 图 10.3 所 示 。 
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当前 内 容 页 : contact. html 





[DD localhosta080/mysite x WY 
€ > 区 | © tocahostaceo/mysite/contact nim 


当前 内 容 页 : contact. html 





图 10.3 重新 刷新 页 面 显 示 效果 


如 果 单 击 工具 栏 中 的 “后 退 ” 和 “前 进 ” 按 钮 ， 会 发 现 导航 功能 失效 ， 页 面 总 是 显示 目标 页 面 ， 
如 图 10.4 所 示 。 这 说 明 使 用 History API 控制 导航 与 浏览 器 导航 功能 存在 差异 ， 一 个 是 JavaScript 肢 
本 控制 ， 一 个 是 系统 自动 控制 。 


不 3 © |© locahostao80/mysite/newshtml 


当前 内 容 页 : contact. html 





10.4 ”刷新 页 面 之 后 工具 栏 导航 失效 





【操作 步骤 】 
第 1 步 ， 设 计 首 页 (index.html)。 新 建文 档 ， 保 存 为 index.html， 构 建 HTML 导航 结构 。 


<hl>History API 示例 </hl> 

<ulid="menu"> 
<li><a href="news.html">News</a></li> 
<li><a hre 人 ="about.html">About</a></li> 
<li><a href="contact.html">Contact</a></li> 

<ul> 


"2221 


gm FUrrist6sss 入 疾 到 灯 克 (家 名 半生 版) 


<div id="content"> 
<h2> 当 前 内 容 页 : index.html</h2> 
</div> 
5 第 2 步 ， 由 于 本 例 使 用 jQuery 框架 ， 因 此 在 文档 头 部 位 置 导入 jQuery 库 文 件 。 
鲍 - | ‘<script src="jquery/jquery-1.11.0.js" type="text/javascript"></script> 

第 3 步 ， 定 义 异步 请 求 函 数 。 该 函数 根据 参数 url 值 ， 异 步 加 载 目标 地 址 的 页 面 内 容 ， 并 把 它 轩 
| 入 首页 内 容 容 器 (<div id="content">) 中 ， 同 时 根据 第 2 个 参数 addEntry 的 值 执行 额外 操作 。 如 果 第 
| 2 个 参数 值 为 rue， 使 用 history.pushState0 方 法 把 目标 地 址 推 入 历史 记录 堆栈 中 。 

















function getContent(url, addEntry) { 
$.get(url) // 异 步 请 求 
.done(function( data ) { 
S$(#content").html(data): // 动 态 加 载 目 标 页 面 


| 
| 
| 
| if(addEntry = true) { 
| history.pushState(null, null, urD;// 把 目标 地 址 推 入 浏览 器 历史 记录 堆栈 中 
| 4 
| 3 
| } 
| 
| 第 4 步 ， 在 页 面 初始 化 事件 处 理 函数 中 ， 为 每 个 导航 链接 绑 定 click 事件 ， 在 click 事件 处 理 函 数 
| 中 调用 getContent0 函 数 ， 同 时 阻止 页 面 的 刷新 操作 。 
| S$(functionO{ 
| S$(#menu a').on('click’, function(e){ 
| e.preventDefault|:; /阻止 页 面 刷新 操作 
| var href = $(this).attr(‘href ): 
| getContent(href, true):; /执行 页 面 内 容 更 新 操作 
| S$(#menu a').removeClass('active’): 
| S(this).addClass('active): 
| D):; 
| »; 
| 第 5 步 ， 注 册 popstate 事件 ， 跟 踪 浏览 器 历史 记录 的 变化 ， 如 果 发 生变 化 ， 则 调用 getContent0 
| 函数 更 新 页 面 内 容 ， 但 是 不 再 把 目标 地 址 添加 到 历史 记录 堆栈 中 。 
| window.addEventListener("popstate". function(e) { 
| getContent(location.pathname. false): 
| »); 

第 6 步 ， 设 计 其 他 页 面 。 

回 abouthtml 
<h2> 当 前 内 容 页 : abouthtml</h2> 
contact.html 


| <h2> 当 前 内 容 页 : contacthtml</h2> 
| 

| news.html 

| <h2> 当 前 内 容 页 : news.html</h2> 
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10.2.2 ”设计 无 刷新 网 站 


本 例 设 计 一 个 简单 的 网 站 ， 当 用 户 选择 一 幅 图 片 时 ， 在 下 方 将 显示 该 技术 对 应 的 文字 描述 ， 同 时 | 
高 亮 显示 该 图 片 ， 提 示 被 选中 状态 。 当 在 浏览 器 工具 栏 中 单 击 “ 后 退 ” 按 钮 时 ， 页 面 应 该 切换 到 上 
个 被 选中 的 图 片 状 态 ， 同 时 图 片 下 方 的 文字 也 要 一 并 切换 ， 当 单 击 “ 前 进 ”按钮 时 执行 类 似 的 响应 操 
作 ， 演 示 效 果 如 图 10.5 所 示 。 

























(a) 网 站 首页 默认 效果 (b) 显示 火药 技术 视图 效果 
10.5 设计 主题 宣传 网 站 | 
这 样 当 单 击 一 幅 图 片 ， 然 后 将 被 更 改 的 URL 分 享 出 去 ， 共 享用 户 可 以 通过 这 个 URL 访问 对 应 的 | 
网 页 。 这 会 带 来 一 些 更 好 的 用 户 体验 ， 并 保证 了 URL 和 页 面 内 容 的 一 致 性 ， 从 而 减少 了 Ajax 传统 应 | 
用 中 URL 与 显示 内 容 不 一 致 的 问题 , 这 对 于 依赖 URL 的 应 用 来 说 是 一 个 障碍 , 会 因此 带 给 用 户 的 一 
【操作 步骤 】 | 
第 1 步 ， 新 建 网 站 首页 (index.html) 结构 。 本 示例 的 HTML 代码 非常 简单 : <div class="gallery"> | 
中 包含 了 所 有 的 链接 ， 每 个 链接 里 有 一 幅 图 片 ， 在 下 面 放置 一 个 空 的 <dqiv class="content"> 容 器 ， 用 来 | 
存放 当 图 片 被 单 击 时 显示 图 片 介 绍 文字 。 
<div class="page-wrap"> 
<div class="gallery"> 
<a hre="/zhaozhishu.php"> 
<img src="images/zhaozhishupng" alt=" 造 纸 术 " class="zhaozhishu" data-name="zhaozhishu"/> </a> 
<a hre 合 "huoyao.php"> 
<img src="images/huoyao.png" alt=" 火 药 " class="huoyao" data-name="huoyao"/></a> 
<a href="/yinshuashu.php"> 
<img src="images/yinshuashu png" alt=" 印 刷 术 " class="yinshuashu" data-name="yinshuashu"/> </a> 
<a href="/zhinanzhen.php"> 
<img src="images/zhinanzhen png" alt=" 指 南 针 " class="zhinanzhen" data-name="zhinanzhen"></a> 
</div> 
<p class="selected"> 中 国 四 大 发 明 </p> 
<p class="highlight"></p> 
<div class="content"></div> 
</div> 
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SI 
人 提示 : 在 设计 结构 时 ， 要 考虑 页 面 的 可 访问 性 和 优雅 降级 : 如 果 没有 JavaSeript， 该 页 面 仍然 可 
以 正常 工作 , 单 击 图 片 可 以 跳 转 到 对 应 的 页 面 ， 然 后 单 击 “ 后 退 ” 按 钮 也 可 以 回 到 之 前 的 
页 面 ， 效 果 如 图 10.6 所 示 。 


ea FJrrss+6sss mr 和 于 适 ( 搁 旬 将 六 

















例 效 果 


10.6 无 JavaScript 状态 下 显示 火药 技术 页 面 效 果 


第 2 步 ， 新 建 JavaScript 文件 ， 保 存 为 images/app.js， 然 后 在 页 面 中 导入 该 脚本 文件 。 
<script src="images/app.js"></script> 


| 第 3 步 ， 在 脚本 文件 中 添加 JavaScript 代码 。 为 <div class="gallery"> 容 器 中 的 每 一 个 <a.> 添 加 一 
| 个 slick 事件 处 理 程序 。 


Var container = document.querySelector('.gallery"); 
container.addEventListener('click’, function(e) { 
if (e.target != e.currentTarget) { 
| e.preventDefault|: 
| /其 他 代码 
| 
| } 
€.stopPropagationO; 
}., false): 


第 4 步 , 在 站 语句 中 ,获取 被 选中 图 片 的 data-name 属性 值 ， 然 后 将 'php' 添 加 到 后 面 拼 成 一 个 要 
访问 的 页 面 地 址 ， 并 将 其 作为 第 三 个 参数 传递 给 pushState() 方 法 。 当 然 ， 此 处 也 可 以 直接 使 用 <a> 的 
| href 属性 值 。 


Var data = €.target.getAttribute('data-name’). 
Url = data + ".php"; 

history.pushState(null, null urD: 
/此 处 更 改 当前 的 classes 样式 

/| 然后 使 用 data 变量 的 值 更 新 

// 并 通过 Ajax 请 求 .content 元 素 的 内 容 

// 最 后 再 更 新 当前 文档 的 title 


| < 全 注意 : 在 真实 的 示例 应 用 中 可 能 会 在 Ajax 请 求 成 功 之 后 才 会 去 修改 URL. 
| 第 5 步 ， 上面 代码 将 真实 代码 中 的 内 容 都 昔 换 成 注释 了 ， 以 便 读者 可 以 只 关注 pushState0 方 法 的 
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使 用 。 现 在 单 击 图 片 ，URL 和 Ajax 请 求 的 内 容 会 被 自动 更 新 , 但 是 当 单 击 浏览 器 工具 栏 中 的 “后 退 ” | 
按钮 时 ， 并 不 会 回 退 到 之 前 选中 的 图 片 。 这 里 还 需要 在 用 户 单 击 “后 退 ” 和 “前 进 ” 按 钮 时 ， 使 用 另 | 
外 一 个 Ajax 请 求 来 更 新 内 容 , 并 再 一 次 使 用 pushState0 方 法 来 更 新 页 面 的 URL。 这 里 使 用 pushState() | 
方法 中 的 第 一 个 参数 〈 状 态 对象 ) 来 保存 状态 信息 。 : 
history.pushState(data, null, urD): 


第 6 步 , 把 上 面 代码 中 的 data 参数 传递 给 popstate 事件 处 理 程序 。 当 浏览 器 的 “后 退 ” 和 “前 进 ”? 

按钮 被 单 击 时 ， 会 触发 popstate 事件 。 | 
Window.addEventListener(popstate' function(e) { 

// e.state 表示 上 一 个 被 单 击 的 图 片 的 data-attribute 


























Ds 
第 7 步 ， 通 过 data 参数 可 以 传递 一 些 有 价值 的 信息 ， 在 本 示例 中 将 之 前 选中 的 图 片 作为 参数 传 
递 给 requestContent0 方 法 ， 在 该 方法 中 使 用 jQuery 的 load0 方 法 进行 一 次 Ajax 请 求 。 


function requestContent(file){ 
$('.content’).load(file + ' .content): 


} 
第 8 步 ， 解 决 了 核心 技术 问题 ， 下 面 完 善 popstate 事件 处 理 程序 。 


Window.addEventListener(popstate' function(e){ 
Var character = e.state: 
if (character 一 nulD) { 
removeCurrentClass(; 
textWrapper.innerHTML = " ": 
content.innerHTML = " "; 
document .title = defaultTitle: 





}else{ 
updateText(character): 
requestContent(character + ".php"); 
addCurrentClass(character): 
document.title = "Ghostbuster | " + character: 
} 


D 

第 9 步 , 完善 index.html 首页 内 容 , 该 页 面 除 了 HTML 结构 , 还 包含 样式 表 文件 : images/style.css、 
images/stylel.css， 其 中 images/stylel.css 导入 之 后 ， 先 隐藏 显示 ， 这 样 能 够 实现 动态 显示 效果 。 

<link rel="stylesheet" href="images/stylel.css" style="display:none !important:"> 

脚本 文件 images/appjs， 完 整 代码 请 参考 资源 包 示 例 。 

第 10 步 , 设计 请 求 页 面 , 本 网 站 包含 4 个 请 求 页 面 : zhaozhishu.php、 huoyao.php、yinshuashu.php、 
zhinanzhen.php， 虽 然 都 是 php 页 面 ， 但 是 都 以 静态 HIML 代码 设计 ， 如 果 读 者 没有 PHP 服务 器 ， 可 
以 把 它们 全 部 改 为 .html 静态 页 面 ， 同 时 需要 在 index.html 页 面 中 修改 <a> 中 的 href 属性 值 ， 另 外 还 需 
要 修改 JavaScript 脚本 中 下 面 代码 句 中 的 ".php": 


Var data = €.target.getAttribute('data-name’). 
url= data + ".php": 
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| 第 二 步 ，4 个 请 求 页 面 的 结构 相同 ， 内 容 略 有 变化 ， 以 zbaozhishu php 文档 为 例 ， 其 HTML 结 
| 构 如 下 所 示 ， 其 他 页 面 结构 就 不 再 展开 ， 请 参考 光盘 示例 。 
| <div id="demo-top-bar"> 
仿 六 | <div id="demo-bar-inside"> 
ws <h2 id="demo-bar-badge"> <a href="/"> 中 国 四 大 发 明 </a> </h2> 


<div id="demo-bar-buttons"> </div> 
es 


| </div> 
<div class="page-wrap"> 

<div class="gallery"> <img src="images/zhaozhishu.png" alt=" 造 纸 术 " class="zhaozhishu"/> </div> 
<h1> 造 纸 术 </hl> 
<div class="content"> 
<p> 造 纸 术 是 中 国 四 大 发 明之 一 ， 纸 是 中 国 古 代劳 动人 民 长 期 经 验 的 积累 和 智慧 的 结晶 ， 人 类 文明 
史上 的 一 项 杰出 的 发 明 创造 。 中国 是 世界 上 最 早 养 蛋 织 丝 的 国家 。 中 国 古 代劳 动人 民 以 上 等 蛋 草 抽 丝 织 绸 , 剩 下 
的 恶 莫 、 病 草 等 则 用 漂 架 法 制 取 丝 绵 。 漂 架 完 毕 ， 鼻 席 上 会 遗留 一 些 残 辊 。 当 漂 加 的 次 数 多 了 ， 艇 席 上 的 残 架 便 
积 成 一 层 纤维 薄片 ， 经 晾 干 之 后 剥离 下 来 ， 可 用 于 书写 。 这 种 漂 架 的 副 产 物 数量 不 多 ,在 古书 上 称 它 为 赫 踊 或 方 
架 。 这 表明 了 中 国 古代 造纸 术 的 起 源 同 丝 架 有 着 渊源 关系 。</p> 
<small><a hre 仁 "http://baike.baidu.com/"> 来 源 : 百度 百科 </a></small> </div> 


上 面 示例 简单 通过 jQuery 来 动态 加 载 内 容 , 用 户 可 以 在 pushState0 方 法 中 通过 状态 对 象 参 数 传递 
- 些 更 复杂 的 信息 。 


| 10.2.3 ”设计 无 刷新 灯箱 广告 
本 例 设计 一 个 简单 的 灯箱 广告 ， 它 使 用 History API 展示 了 一 个 图 片 预览 模式 ， 一 个 具有 相关 性 
| 的 图 片 无 刷新 访问 。 在 支持 的 浏览 器 中 浏览 ， 单 击 下 一 张 图 片 画廊 的 链接 将 更 新 照片 和 更 新 URL 地 


| 址 ， 没 有 引发 全 页 面 刷新 。 在 不 支持 的 浏览 器 ， 或 者 当 用 户 禁 用 了 脚本 时 ， 导 航 链接 只 是 作为 普通 链 
接 ， 会 打开 一 个 新 的 页 面 ， 整 页 刷新 。 整 个 示例 演示 效果 如 图 10.7 所 示 。 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| </div> 
| 
| 
| 
| 
| 
| 
| 
| 





(a) 上 一 张 (b) 下 一 张 








外 
10.7 无 刷新 图 片 画廊 演示 效果 
有 具体 操作 步骤 请 扫 码 学 习 。 





本 例 利用 History API 的 状态 对 象 ， 实 时 记录 用 户 的 每 一 次 操作 ， 把 每 一 次 操作 信息 传递 给 浏览 
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器 的 历史 记录 保存 起 来 ， 这 样 当 用 户 单 击 浏览 器 的 “后 退 ”按钮 时 ， 会 逐步 恢复 前 面 的 操作 状态 ， 从 | 
而 实现 历史 恢复 功能 ， 演 示 效 果 如 图 10.8 所 示 。 





(a) 绘制 文字 (b) 恢复 前 面 的 绘制 | 
图 10.8 设计 历史 恢复 效果 | 
| 


在 示例 页 面 中 显示 一 个 canvas 元 素 ， 用 户 可 以 在 该 canvas 元 素 中 随意 
使 用 鼠标 绘画 ， 当 用 户 单 击 一 次 或 连续 单 击 浏览 器 的 “后 退 ”按钮 时 ， 可 以 
撤销 当前 绘制 的 最 后 一 笔 或 多 笔 , 当 用 户 单 击 一 次 或 连续 单 击 浏览 器 的 “前 
进 ” 按 钮 时 ， 可 以 重 绘 当前 书写 或 绘制 的 最 后 一 笔 或 多 笔 。 

具体 操作 步骤 请 扫 码 学 习 。 








10.3 在 线 练 习 


使 用 HTMLS History API 修改 站 点 的 URL。 
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第 /| 章 
文件 操作 


HTMLS5 新 增 FileReader API 和 FileSystem API。 其 中 FileReader API 负责 读 取 文 件 内 容 ， 
FileSystem API 负责 本 地 文件 系统 的 有 限 操 作 。 另 外 , HTMLS5 增强 了 HTML4 的 文件 域 功能 ， 
多 许 提交 多 个 文件 ， 本 章 将 围绕 这 些 API， 详 细 介 绍 HTMLS5 的 本 地 文件 操作 功能 。 


【 学 习 重 点 】 

MH 使 用 FileList 对 象 

MI 使 用 Blob 对 象 

WI 使 用 FileReader 对 象 

WI 使 用 ArrayBuffer 对 象 和 ArrayBufferView 对 象 
WI 使 用 FileSystem API 


第 ]] 阐 文件 捧 作 一 


11.1 FileList 


HIMLS 在 HIML4 文件 域 基础 上 为 File 控件 新 添 multiple 属性 ， 允 许 用 户 在 一 个 File 控件 内 选 | 
择 和 提交 多 个 文件 。 
【示例 1】 下 面 示例 设计 在 文档 中 插入 一 个 文件 域 ， 人 允许 用 户 同时 提交 多 个 文件 。 
<input type="file" multiple> 
为 了 方便 用 户 在 脚本 中 访问 这 些 将 要 提交 的 文件 ，HTMLS5 新 增 了 FileList 和 File 对 象 。 
FileList: 表示 用 户 选择 的 文件 列表 。 | 
回 File: 表示 File 控件 内 的 每 一 个 被 选择 的 文件 对 象 。FileList 对 象 为 这 些 File 对 象 的 列表 , 代 | 
表 用 户 选 择 的 所 有 文件 。 
【示例 2】 下 面 示例 演示 了 如 何 使 用 FileList 和 File 对 象 访问 用 户 提交 的 文件 名 称 列表 ， 演 示 效 
果 如 图 11.1 所 示 。 





<scrip> 
function ShowFileNameO{ 
//document.getElementById("file").files 返回 FileList 对 象 
for(var i=0:i<document.getElementById("file").files.length:i++) { 
var file = document.getElementById("file").files[i]: ”// 获 取 每 个 选择 的 File 对 象 
consolelog(file name): /在 控制 台 显示 每 个 文件 的 名 称 
} 


} 

</scrip> 

<input type="file" id="file" multiple> 

<input type="button" onclick="ShowFileName0O:" value=" 文 件 上 传 "/> 


-+ 加 


”WX 


+ #0 (2) 
Ee 











(a) 选择 多 个 文件 (b) 在 控制 台 显示 提示 信息 
图 11.1 使 用 FileList 和 File 对 象 获取 提交 文件 信息 
总 提示 ，File 对 象 包 合 两 个 属性 : name 属性 表示 文件 名 ， 但 不 包括 路 径 ，lastModifiedDate 属性 表 
示 文件 的 景 后 修改 日 期 
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| i112 Blob 


HTMLS 的 Blob 对 象 用 于 存储 二 进 制 数据 还 可 以 设置 存储 数据 的 MINE 类 型 ,其 他 HTMLS5 二 


， 进 制 对 象 继承 Blob 对 象 。 


回 11.2.1 访问 Blob 


Blob 对 象 包含 两 个 属性 : 
回 size: 表示 一 个 Blob 对 象 的 字 节 长 度 。 
| 回 type: 表示 Blob 的 MIME 类 型 ， 如 果 为 未 知 类 型 ， 则 返回 一 个 空 字符 串 。 
| 【示例 1】 下 面 示例 演示 了 如 何 获取 文件 域 中 第 一 个 文件 的 Blob 对 象 ， 并 访问 该 文件 的 长 度 和 
| 文件 类 型 ， 演 示 效 果 如 图 11.2 所 示 。 
function ShowFileTypeO{ 
var file = document.getElementById("file").files[0]:; /获取 用 户 选择 的 第 一 个 文件 
consolelog( file size ): /显示 文件 字 节 长 度 
console log( file.type): /显示 文件 类 型 





由 

</script> 

<input type="file" id="file" multiple> 

<input type="button" onclick="ShowFileTypeO:" value=" 文 件 上 传 "/> 


CilUsers\BiPlcures\ 可 文件 上 伟 








文 /二 者 过 9GG) 全 看 因 P0) 党 (C) 工 失 Im) 六 A | 





11.2 在 控制 台 显示 第 一 个 选取 文件 的 大 小 和 类 型 
4 注意 : 对 于 图 像 类 型 的 文件 ，Blob 对 象 的 type 属性 都 是 以 “image/” 开 头 的 ， 后 面 是 图 像 类 型。 


| 【示例 2】 下 面 示例 利用 Blob 的 type 属性 ， 判 断 用 户 选择 的 文件 是 否 为 图 像 文件 。 如 果 在 批量 
| 上 传 时 只 允许 上 传 图 像 文 件 ， 可 以 检测 每 个 文件 的 type 属性 值 ， 当 提交 非 图 像 文件 时 ， 弹 出 错误 提 
| 示 信 息 ， 并 停止 后 面 的 文件 上 传 ， 或 者 跳 过 不 上 传 该 文件 ， 演 示 效 果 如 图 11.3 所 示 。 
function fileUploadO{ 

var file: 
| for(var i=0:i<document.getElementById("file").files.length:i++){ 
| file = document.getElementById("file").files[i]: 
| if(VimageV\w+/ .test(file type) { 


sas 
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alert(file.name+" 不 是 图 像 文件 !"); 





continue; 
} else{ | 
// 此 处 加 入 文件 上 传 的 代码 | 
alertfile namet" 文 件 已 上 传 "): | 名 
} sa 
} 
) | 
</script> | 
<input type="file" id="file" multiple> | 
| 


<input type="button" onclick="fileUpload0:" value=" 文 件 上 传 "/> 


i “a 


es ET 


wages CiUsersi8\PicturesW jpg] 济 药 
昌 下 


ZINy | osor "1ipg "2po” 
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(a) 提交 多 个 文件 (b) 错误 提示 信息 
图 11.3 对 用 户 提交 文件 进行 过 滤 


【拓展 】 

HTMLS5 为 file 控件 新 添加 accept 属性 ， 设 置 file 控件 只 能 接受 某 种 类 型 的 文件 。 目 前 主流 浏览 | 

器 对 其 支持 还 不 统一 、 不 规范 ， 部 分 浏览 器 仅 限 于 打开 文件 选择 窗口 时 ， 默 认 选 择 文件 类 型 。 
<input type="file" id="file" accept="image/*" /> 


11.2.2 创建 Blob 


创建 Blob 对 象 的 基本 方法 如 下 : 
Var blob = new Blob(blobParts. type): 


参数 说 明 如 下 : 
回 blobParts: 可 选 参数 ， 数 组 类 型 ， 其 中 可 以 存放 任意 个 以 下 类 型 的 对 象 ， 这 些 对 象 中 所 携带 
的 数据 将 被 依 序 追加 到 Blob 对 象 中 。 
> ArrayBuffer 对 象 。 
> ArrayBufferView 对 象 。 
> ”Blob 对 象 。 
> String 对 象 。 | 
回 type: 可 选 参 数 ， 字 符 串 型 ， 设 置 被 创建 的 Blob 对 象 的 type 属性 值 ， 即 定义 Blob 对 象 的 | 
MIME 类 型 。 默 认 参 数值 为 空 字符 串 ， 表 示 未 知 类 型 。 | 
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容 提示 : 当 创建 Blob 对 象 时 ， 可 以 使 用 两 个 可 选 参 数 。 如 果 不 使 用 任何 参数 ， 创 建 的 Blob 对 象 的 
| size 属性 值 为 0， 即 Blob 对 象 的 字 节 长 度 为 0， 代码 如 下 所 示 。 

| 

| var blob = new BlobO): 





入 | 【示例 1】 下 面 代码 演示 了 如 何 设置 第 一 个 参数 。 


var blob = new BIob(["4234" + "5678"]): 
| 


var shorts = new Uint16Array(buffer, 622. 128): 
| var blobA = new Blob([blob. shorts]): 
Var bytes = new Uint8Array(buffer shorts.byteOffset + shorts.byteLength):; 
Var blobB = new Blob([blob. blobA, bytes]) 
Var blobC = new Blob([buffer blob. blobA, bytes]): 


4 注意， 上面 代码 用 到 了 ArrayBuffer 对 象 和 ArrayBufferView 对 象 ， 后 面 将 详细 介绍 这 两 个 对 象 。 
【示例 2】 下 面 代码 演示 了 如 何 设 置 第 二 个 参数 。 


Var blob = new Blob(["4234" + "5678"], {type: "text/plain"}): 
var blob = new Blob(["4234" + "5678"], {type: "text/plain: charset=UTF-8"}); 


容 提示 : 为 了 安全 起 见 ， 在 创建 Blob 对 象 之 前 ， 可 以 先 检测 一 下 浏览 器 是 否 支持 Blob 对 象 。 


if(!window.Blob) 
alert ("您 的 浏览 器 不 支持 Blbo 对 象 。"); 
else 
Varblob = new Blob(["4234" + "5678"], {type: "text/plain"}): 
目前 ， 各 主流 浏览 器 的 最 新 版 本 都 支持 Blob 对 象 。 
【示例 3】 下 面 示例 完整 地 演示 了 如 何 创建 一 个 Blob 对 象 。 
在 页 面 中 设计 一 个 文本 区 域 和 一 个 按钮 ， 当 在 文本 框 中 输入 文字 ， 然 后 单 击 “ 创 建 Blob 对 象 ” 
| 按钮 后 ，JavaScript 脚本 根据 用 户 输入 文字 创建 二 进 制 对 象 ， 再 根据 该 二 进 制 对 象 中 的 内 容 创 建 URL 
| 地 址 ， 最 后 在 页 面 底部 动态 添加 一 个 “Blob 对 象 文件 下 载 ”链接 ， 单 击 该 链接 可 以 下 载 新 创建 的 文 
| 件 ， 使 用 文本 文件 打开 ， 其 内 容 为 用 户 在 文本 框 中 输入 的 文字 ， 如 图 11.4 所 示 。 
| <script> 
function testO{ 
var text = document.getElementById("textarea").value: 
Var result = document.getElementById("result"): 





// 创 建 Blob 对 象 
这 !window.Blob) 
result.innerHTML=" 浏 览 器 不 支持 Blob 对 象 。": 

| else 
| var blob =new Blob([text): 。” //Blob 中 数据 为 文字 时 默认 使 用 utf 格式 
| // 通 过 createObjectURL 方法 创建 文字 链接 
| 让 (windowURI) { 
| result.innerHIML = '<a download href=" +window.URL.createObjectURL(blob) + " target="_blank"> 
| Blob 对 象 文件 下 载 </a>'; 

} 
| 四 
| </script> 
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<textarea id="textarea"></textarea><br /> 
<button onclick="test0"> 创 建 Blob 对 象 </button> 
pid="result"></p> 





生前 本 有 光 ， 寻 妨 井上 大 > 
竺 藉 望 明月 ， 长 祥 轩 大 经 。 


ELE 
妃 ob 对 象 文件 下 载 





TE PIT 加 





(a) 创建 Blob 文件 (b) 查看 文件 信息 
图 11.4 创建 和 查看 Blob 文件 信息 


在 动态 生成 的 <a> 标 签 中 包含 download 属性 ， 它 设置 超 链接 为 文件 下 载 类 型 。 
【拓展 】 | 
HTML5 支持 URL 对 象 , 通过 该 对 象 的 createObjectURL 方法 可 以 根据 一 个 Blob 对 象 的 二 进 制 数 | 

据 创建 一 个 URL 地 址 ， 并 返回 该 地 址 ， 当 用 户 访问 该 URL 地 址 时 ， 可 以 直接 下 载 原始 二 进 制 数 据 。 | 


11.2.3 截取 Blob 


Blob 对 象 包含 slice0 方 法 ， 它 可 以 从 Blob 对 象 中 截取 一 部 分 数据 ， 然 后 将 这 些 数据 创建 为 一 个 | 
新 的 Blob 对 象 并 返回 ， 用 法 如 下 。 
Var newBlob = blob.slice(start, end, contentType): 
参数 说 明 如 下 : 
回 ”start， 可 选 参数 ， 整 数值 ， 设 置 起 始 位 置 。 
> ”如 果 值 为 0， 表 示 从 第 一 个 字 节 开始 复制 数据 。 
> ”如 果 值 为 负数 , 且 Blob 对 象 的 size 属性 值 +start 参数 值 大 于 等 于 0, 则 起 始 位 置 为 Blob | 
对 象 的 size 属性 值 +start 参数 值 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +start 参数 值 小 于 0， 则 起 始 位 置 为 Blob 对 
象 的 起 点 位 置 。 
> ”如 果 值 为 正 数 ， 且 大 于 等 于 Blob 对 象 的 size 属性 值 ， 则 起 始 位 置 为 Blob 对 象 的 size | 
属性 值 。 
> ”如 果 值 为 正 数 ， 且 小 于 Blob 对 象 的 size 属性 值 ， 则 起 始 位 置 为 start 参数 值 。 
回 end: 可 选 参数 ， 整 数值 ， 设 置 终点 位 置 。 
> ”如 果 忽 略 该 参数 ， 则 终点 位 置 为 Blob 对 象 的 结束 位 置 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +end 参数 值 大 于 等 于 0, 则 终点 位 置 为 Blob | 





对 象 的 size 属性 值 +end 参数 值 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +end 参数 值 小 于 0， 则 终点 位 置 为 Blob 对 | 
象 的 起 始 位 置 。 | 


> ”如 果 值 为 正 数 ， 且 大 于 等 于 Blob 对 象 的 size 属性 值 ， 则 终点 位 置 为 Blob 对 象 的 size | 
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5 Fhrisr esss x 和 HE 和 ( 微 课 精 编 版 ) 


| 属性 值 。 
| > ”如 果 值 为 正 数 ， 且 小 于 Blob 对 象 的 size 属性 值 ， 则 终点 位 置 为 end 参数 值 。 
| contentType: 可 选 参数 ， 字 符 串 值 ， 指 定 新 建 Blob 对 象 的 MIME 类 型 。 
如 果 slice0 方 法 的 三 个 参数 均 省 略 ,相当 于 把 一 个 Blob 对 象 原样 复制 到 一 个 新 建 的 Blob 对 象 中 。 
当 起 始 位 置 大 于 等 于 终点 位 置 时 , slice0 方 法 复制 从 起 始 位 置 开始 到 终点 位 置 结束 这 一 范围 中 的 数据 。 
当 起 始 位 置 小 于 终点 位 置 时 ，slice0 方 法 复制 从 终点 位 置 开始 到 起 始 位 置 结 束 这 一 范围 中 的 数据 。 新 
| 建 的 Blob 对 象 的 size 属性 值 为 复制 范围 的 长 度 ， 单 位 为 byte。 
| 【示例 】 下 面 示例 演示 了 Blob 对 象 的 slice0 方 法 应 用 。 
<inputtype="file" id-"file" multiple> 
<input type="button" onclick="ShowFileType0:" value=" 文 件 上 传 "/> 
scrip> 
| var file = document.getElementById("file") .files[0]: 
| if(file){ 
var filel = file.sliceO: // 复 制 File 对 象 
var file2 = file.slice(0.file.size): // 复 制 File 对 象 
var file3 = fle.slice(-(Math round(file size/2)): /复制 File 对 象 的 后 半 部 分 
| var file4 = file.slice(0. Math.round(file.size/2)); // 复 制 File 对 象 的 前 半 部 分 
| /复制 File 对 象 ， 从 开始 处 复制 到 结束 处 之 前 的 150 个 字 节 处 ， 并 设置 MIME 类 型 
| var fles = file.slice(0,-150, "application/plain"): 








1 
</script> 


.2.4 保存 Blob 


HTML5 支持 在 indexedDB 数据 库 中 保存 Blob 对 象 。 





党 提示 : 目前 Chrome 37+、Firefox 17+、 正 10+ 和 Opera 24+ 支 持 该 功能 

| 

| 【示例 】 下 面 示例 设计 在 页 面 中 显示 一 个 文件 控件 和 一 个 按钮 ， 通 过 文件 控件 选取 文件 后 ， 单 
| 

| 





Ht 


| 按钮 JavaScript 脚本 将 把 用 户 选 取 的 文件 保存 到 indexedDB 数据 库 中 。 

<input type="file" id="file" multiple> 

<input type="button" onclick="saveFile0:" value=" 保 存 文件 "> 

<script> 

Window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB: 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitDBCursor || window.msIDBCursor: 


var dbName = 'test': /数据 库 名 
Var dbVersion = 20170202: /版 本 号 


var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e){ idb = e.target.result: } 
dbConnect.onerror = function() {alert( 数 据 库 连 接 失 败 "): }: 
dbConnectonupgradeneeded = function(e){ 

| idb = e.target.result: 

| idb.createObjectStore('files’): 

| 


| 
| var idb: 
| 
| 
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var file = document.getElementById("file").files[0]: // 得 到 用 户 选 择 的 第 一 个 文件 
Var tx = idb.transaction(['files'],"readwrite"); /开启 事务 


Var store = tx.objectStore(files); 

Var req = store put(filevblob): 

req.onsuccess = flnction(e){ alert(" 文 件 保存 成 功 "): }; 
req.onerror = function(e){ alert(" 文 件 保存 失败 "):}: 





} 

</script> 

在 浏览 器 中 预览 ， 页 面 中 显示 一 个 文件 控件 和 一 个 按钮 ， 通 过 文件 控件 选取 文件 ， 然 后 单 击 “ 保 
存 文件 ”按钮 ，JavaScript 将 把 用 户 选取 文件 保存 到 indexedDB 数据 库 中 ， 保 存 成 功 后 弹出 提示 对 话 | 
框 ， 如 图 11.5 所 示 。 








加 = | 
日 localhosta080/mysit 和 localhosts x | 
© © localhost ysite hn : © | © localhosta080/mysite/b ml pa | 
上 
1 jg [2 | 
:3080 呈 示 ! 
mms 
[ 











(a) 选择 文件 (b) 保存 文件 
图 11.5 保存 Blob 对 象 应 用 


11.3 FileReader 


FileReader 能 够 把 文件 读 入 内 存 , 并 且 读 取 文件 中 的 数据 。 目前, Firefox 3.6+、Chrome 6+、Safari | 
5.2+、Opera 11+ 和 IE 10+ 版 本 浏览 器 都 支持 FileReader 对 象 。 | 


11.3.1 读 取 文 件 


使 用 FileReader 对 象 之 前 ， 需 要 实例 化 FileReader 类 型 ， 代 码 如 下 所 示 : | 视频 讲解 


if(typeof FileReader 一 "undefined"){alert(" 当 前 浏览 器 不 支持 FileReader 对 象 "):} 

elsef var reader = new FileReader():} 

FileReader 对 象 包含 5 个 方法 ， 其 中 前 4 个 用 以 读 取 文件 ， 另 一 个 用 来 中 断 读 取 操作 。 

readAsText(Blob, type): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 文本 数据 。 该 方法 包含 两 个 参数 ， | 
其 中 第 二 个 参数 是 文本 的 编码 方式 ， 默 认 值 为 UTF-8。 

readAsBinaryString(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 二 进 制 字符 串 。 通常 调 用 该 方 | 
法 将 文件 提交 到 服务 器 端 ， 服 务 器 端 可 以 通过 这 段 字 符 串 存储 文件 。 

TeadAsDataURL(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 DataURL 字符 串 。 该 方法 就 是 | 
将 数据 以 一 种 特殊 格式 的 URL 地 址 形式 直接 读 入 页 面 。 

readAsArrayBuffer(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 一 个 ArrayBuffer 对 象 。 

回 abort0: 不 包含 参数 ， 中 断 读 取 操 作 。 | 
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| < 注意 : 上 述 前 4 个 方法 都 包含 一 个 Blob 对 象 或 File 对 象 参 数 ， 无 论 读 取 成 功 或 失败 ， 都 不 会 返 





到 Sy 


回 读 取 结果 ， 读 取 结果 存储 在 result 属性 中 。 


【示例 】 下 面 示例 演示 如 何在 网 页 中 读 取 并 显示 图 像 文件 、 文 本 文件 和 二 


<script> 
window.onload = functionO{ 
var result=document.getElementById("result"): 
var file=document.getElementById("file"): 
if (typeof FileReader 一 "undefined ){ 
TesultinnerHTML = "<h1> 当 前 浏览 器 不 支持 FileReader 对 象 </h1>"; 
file.setAttribute('disabled', 'disabled' ): 
站 
} 
function readAsDataURLO{ // 将 文件 以 Data URL 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: // 检 查 是 否 为 图 像 文件 
这 WimageWw+/test(file.type)){ 
alert(" 提 交 文 件 不 是 图 像 类 型 ); 
Teturn false: 
} 
Var reader = new FileReader(); 
reader.readAsDataURL(file): 
reader.onload = function(e){ 
result.innerHTML = "<img src="+this.result+" alt=""/>" 
} 
} 
function readAsBinaryString0{ ”// 将 文件 以 二 进 制 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: 
Var reader = new FileReader(): 
reader.readAsBinaryString(file); 
reader.onload = function(D{ 
result.innerHTML=this.result; 
} 
function readAsTextO{ // 将 文件 以 文本 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: 
var reader = new FileReader0: 
TeaderTeadAsText(file): 
reader.onload = function(f { 
result.innerHTML=this .result: 
} 
} 
</script> 
<input type="file" id="file" /> 
<input type="button" value=" 读 取 图 像 " onclick="readAsDataURLO"/> 
<input type="button" value=" 读 取 二 进 制 数 据 " onclick="readAsBinaryString0"/> 
<input type="button" value=" 读 取 文 本 文件 " onclick="readAsText0"/> 
<div name="result" id="result"></div> 





在 Firefox 浏览 器 中 预览 ， 使 用 file 控件 选择 一 个 图 像 文 件 ， 然 后 单 击 “ 读 取 图 像 ” 按 钮 ， 显 示 
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进 制 代码 文件 。 


第 1] 章 文件 操作 一 T 


效果 如 图 11.6 所 示 ; 重新 使 用 file 控件 选择 一 个 二 进 制 文件 ,然后 单 击 “ 读 取 二 进 制 数据 ”按钮 ， 显 | 
示 效 果 如 图 11.7 所 示 ; 最 后 选择 文本 文件 ， 单 击 “ 读 取 文本 文件 ”按钮 ， 显 示 效 果 如 图 11.8 所 示 。 
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图 11.6 读 取 图 像 文件 


hrsp//localno eaftectL himl xX 


localhocttoeomyione 则 妥 CET-cwA> 曲 » 


ME. | test.be 证 到 区 像 | 证 取 一 过 制 各 多 | | 亚 取 文本 文件 


床 前 明月 光 , 疑 尽 地 上 需 。 举 头 思 明月 ， 低 头 思 故 乡 。 





图 11.8 读 取 文本 文件 示例 效 时 
| 
| 


上 面 示例 演示 如 何 读 显 文件 ,用 户 也 可 以 选择 不 显示 , 直接 提交 给 服务 器 ， 然 后 保存 到 文件 或 数 | 
据 库 中 。 注 意 ，FileReader 对 象 读 取 的 数据 都 保存 在 result 属性 中 。 | 


11.3.2 ”事件 监测 


FileReader 对 象 提供 6 个 事件 ， 用 于 监测 文件 读 取 状态 ， 简 单 说 明 如 下 。 [ms 
onabort: 数据 读 取 中 断 时 触发 。 
onprogress: 数据 读 取 中 触发 。 
onerror: 数据 读 取出 错时 触发 。 
onload: 数据 读 取 成 功 完 成 时 触发 。 
onloadstart: 数据 开始 读 取 时 触发 。 
onloadend: 数据 读 取 完 成 时 触发 ， 无 论 成 功 或 失败 。 
【示例 】 下 面 示例 设计 当 使 用 FileReader 对 象 读 取 文件 时 会 发 生 一 系列 事件 ,在 控制 台 跟踪 了 读 | 
取 状 态 的 先后 顺序 ， 演 示 效 果 如 图 11.9 所 示 。 
<script> 
window.onload = functionO{ 
Var result=document.getElementById("result"): 
var file=document.getElementById("file"): | 
if (typeof FileReader 一 "undefined ){ | 
TesultinnerHTML = "<h1> 当 前 浏览 器 不 支持 FileReader 对 象 <hl>": | 





加 网 回回 轿 回 


snare 
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SI 


var file = document.getElementById("file").files[0]: 

Var reader = new FileReader(): 

reader.onload = function(e){ 
result.innerHTML = "<img sre="+this.result+" alt=""/>" 

| console.log("load"): 

| } 
Teader.onprogress = function(e){ console.log("progress"); } 
reader.onabort = function(e){ console.log("abort"): } 
Teader.onerror = function(e){ console.log("error"):} 
reader.onloadstart = function(e){ console.log("loadstart"):} 
reader.onloadend = function(e){ console.log("loadend"): } 
reader.readAsDataURL(file): 

} 

</script> 

<input type="file" id="file" /> 

<input type="button" value=" 显 示 图 像 " onclick="readFile0" /> 

<div name="result" id="result"></div> 








于 灿 革 村 图 11.9 跟踪 读 取 操作 


| 在 上 面 示例 中 ， 当 单 击 “显示 图 像 ”按钮 后 ， 将 在 页 面 中 读 入 一 个 图 像 文 件 ， 同 时 在 控制 台 可 以 
| 看 到 按 顺 序 触发 的 事件 。 用 户 还 可 以 在 onprogress 事件 中 使 用 HIMLS 新 增 元 素 progress 显示 文件 的 


11.4 ArrayBuffer 和 ArrayBufferView 


HTMLS5 新 增 ArrayBuffer 对 象 和 ArrayBufferView 对 象 。ArrayBuffer 对 象 表示 一 个 固定 长 度 的 组 
| 存 区 ， 用 来 存储 文件 或 网 络 大 数据 ， ArrayBufferView 对 象 表示 将 缓存 区 中 的 数据 转换 为 各 种 类 型 的 
| 数值 数组 。 
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4 人骨 注意 HTMLS 不 允许 直接 对 ArrayBuffer 对 象 内 的 数据 进行 操作 ， 需 要 使 用 AmayBufferView 对 


象 来 读 写 ArrayBuffer 对 象 中 的 内 容 。 
11.4.1 使 用 ArrayBuffer 
ArrayBuffer 对 象 表 示 一 个 固定 长 度 的 存储 二 进 制 数据 的 缓存 区 。 用 户 不 能 直接 存 取 ArrayBuffer 





缓存 区 中 的 内 容 ， 必 须 通过 ArrayBufferView 对 象 来 读 写 ArrayBuffer 缓存 区 中 的 内 容 。ArrayBuffer ， 





对 象 包 含 length 属性 ， 该 属性 值 表示 缓存 区 的 长 度 。 
创建 ArrayBuffer 对 象 的 方法 如 下 : 


var buffer = new ArrayBuffer(32); 


) 
) 六 


参数 为 一 个 无 符号 长 整 型 的 整数 , 用 于 设置 缓存 区 的 长 度 ,单位 为 byte。ArrayBuffer 缓存 区 创建 | 


成 功 之 后 ， 该 缓存 区 内 存储 数据 初始 化 为 0。 


这 提示 : 目前 ,Firefox 4+、Opera 11.6+、Chrome 7+、Safari 5.1+、IE 10+ 等 版 本 浏览 器 支持 ArrayBuffer | 


对 象 。 
11.4.2 ”使 用 ArrayBufferView 


HTML5 使 用 ArrayBufferView 对 象 以 一 种 标准 格式 来 表示 ArrayBuffer 缓存 区 中 的 数据 HTMLS | 


不 允许 直接 使 用 ArrayBufferView 对 象 ， 而 是 使 用 ArrayBufferView 的 子 类 实例 来 存 取 ArrayBuffer 缓 | 


存 区 中 的 数据 ， 各 种 子 类 说 明 如 表 11.1 所 示 。 
表 11.1 ArrayBufferView 的 子 类 








类 型 说 了 明 
Int8Array 8 位 整数 数组 
Uint8Array 8 位 无 符号 整数 数组 
Uint8ClampedArray 8 位 无 符号 整数 数组 
Int16Array 16 位 整数 数组 
Uint16Array 16 位 无 符号 整数 数组 
Int32Array 32 位 整数 数组 
Uint32Array 32 位 无 符号 整数 数组 
Float32Array 32 位 IEEE 浮 点 数 数组 
Float64Array 64 位 IEEE 浮 点 数 数组 





旋 提示 : Uint8ClampedArray 地 类 用 于 定义 一 种 特殊 的 8 位 无 符号 整数 数组 ， 该 数组 的 作用 : 代 杰 | 


CanvasPixelArray 数组 用 于 Canvas API 中 。 
该 数组 与 普通 8 位 无 符号 整数 数组 的 区 别 : 将 ArrayBuffer 缓存 区 中 的 数值 进行 转换 时 ， 内 部 使 
用 箱 位 〈clamping) 算法 ， 而 不 是 模 数 (modulo) 算法 。 
ArrayBufferView 对 象 的 作用 : 可 以 根据 同一 个 ArrayBuffer 对 象 创建 各 种 数值 类 型 的 数组 。 








【示例 1】 在 下 面 示例 代码 中 ， 根 据 相 同 的 ArrayBuffer 对 象 ， 可 以 创建 32 位 的 整数 数组 和 8 位 | 


的 无 符号 整数 数组 。 


“0s 


Ca SSs Fhrrstesss wy na 和 ( 微 课 精 编 版 ) 
| 乐 论 
| be 

// 根 据 ArrayBuffer 对 象 创建 32 位 整数 数组 

Var arrayl = new Int32Array(Arrayeuffer): 

/根据 同一 个 ArrayBuffer 对 象 创建 8 位 无 符号 整数 数组 

var array2 = new Uint8Array(ArrayBuffer): 








侠 | 在 创建 ArrayBufferView 对 象 时 , 除了 要 指定 ArrayBuffer 缓存 区 外 , 还 可 以 使 用 下 面 两 个 可 选 参数 : 
byteOffset: 为 无 符号 长 整 型 数值 ， 设 置 开始 引用 位 置 与 ArrayBuffer 缓存 区 第 一 个 字 节 之 间 
| 的 偏离 值 ， 单 位 为 字 节 。 提示 ， 属 性 值 必须 为 数组 中 单个 元 素 的 字 节 长 度 的 倍数 ， 省 略 该 参 








| 数值 时 ，ArrayBufferView 对 象 将 从 AmrayBuffer 缓存 区 的 第 一 个 字 节 开始 引用 。 
| 回 length: 为 无 符号 长 整 型 数值 ， 设 置 数组 中 元 素 的 个 数 。 如 果 省 略 该 参数 值 ， 将 根据 缓存 区 
| 长 度 、ArrayBufferView 对 象 开始 引 用 的 位 置 、 每 个 元 素 的 字 节 长 度 自动 计算 出 元 素 个 数 。 
| 如 果 设 置 了 byteOffset 和 length 参数 值 ， 数 组 从 byteOffset 参数 值 指定 的 开始 位 置 开 始 ， 长 度 为 
| length 参数 值 所 指定 的 元 素 个 数 x 每 个 元 素 的 字 节 长 度 。 
| 如 果 忽 略 了 byteOffset 和 length 参数 值 ， 数 组 将 跨越 整个 ArrayBuffer 缓存 区 。 
如 果 省 略 length 参数 值 , 数组 将 从 byteOffset 参数 值 指定 的 开始 位 置 到 ArrayBuffer 缓存 区 的 结束 
位 置 。 
ArrayBufferView 对 象 包含 3 个 属性 : 
回 buffer: 只 读 属性 ， 表 示 ArrayBuffer 对 象 ， 返 回 ArrayBufferView 对 象 引用 的 ArrayBuffer 
缓存 区 。 
回 byteOffset: 只 读 属 性 ， 表 示 一 个 无 符号 长 整 型 数值 ， 返 回 ArrayBufferView 对 象 开 始 引用 的 
位 置 与 ArrayBuffer 缓存 区 的 第 一 个 字 节 之 间 的 偏离 值 ， 单 位 为 字 节 。 
length: 只 读 属性 ， 表 示 一 个 无 符号 长 整 型 数值 ， 返 回 数组 中 元 素 的 个 数 。 
【示例 2】 下 面 示 例 代 码 演示 了 如 何 存 取 ArrayBuffer 缓存 区 中 的 数据 。 
var byte =array2[4]: ”// 读 取 第 5 个 字 节 的 数据 
array2[4] = 1: // 设 置 第 5 个 字 节 的 数据 


区 





| 

11.4.3 使 用 DataView 

视频 讲解 | 除了 使 用 ArrayBufferView 子 类 外 ， 也 可 以 使 用 DataView 类 存 取 ArrayBuffer 缓存 区 中 的 数据 。 

| DataView 继承 于 ArrayBufferView 类 ， 提 供 了 直接 存 取 ArrayBuffer 缓存 区 中 数据 的 方法 。 

创建 DataView 对 象 的 方法 如 下 : 

Var view = new DataView(buffer byteOffset. byteLength): 

参数 说 明 如 下 : 

回 buffer: 为 ArrayBuffer 对 象 ， 表 示 一 个 ArrayBuffer 缓存 区 。 

回 byteOffset: 可 选 参数 ， 为 无 符号 长 整 型 数值 ， 表 示 DataView 对 象 开始 引用 的 位 置 与 
ArayBuffer 缓存 区 第 一 个 字 节 之 间 的 偏离 值 ， 单 位 为 字 节 。 如 果 忽 略 该 参数 值 ， 将 从 
ArrayBuffer 缓存 区 的 第 一 个 字 节 开始 引用 。 

byteLength: 可 选 参数 ， 为 无 符号 长 整 型 数值 ， 表 示 DataView 对 象 的 总 字 节 长 度 。 

| 如 果 设 置 了 byteOffset 和 byteLength 参数 值 ，DataView 对 象 从 byteOffset 参数 值 所 指定 的 开始 位 

| 置 开始 ， 长 度 为 byteLength 参数 值 所 指定 的 总 字 节 长 度 。 

| 如 果 忽略 了 byteOffset 和 byteLength 参数 值 ，DataView 对 象 跨越 整个 ArrayBuffer 缓存 区 。 
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如 果 省 略 byteLength 参数 值 , DataView 对 象 将 从 byteOffset 参数 所 指定 的 开始 位 置 到 ArrayBuffer | 
缓存 区 的 结束 位 置 。 | 
DataView 对 象 包含 的 方法 说 明 如 表 11.2 所 示 。 | 

| 


表 11.2 DataView 对 象 方法 























方 ” 洲 说 明 

getInt8(byteOffset) 获取 指定 位 置 的 一 个 8 位 整数 值 | 
getUint8(byteOffset) 获取 指定 位 置 的 一 个 8 位 无 符号 型 整数 值 | 
getInt16(byteOffset. littleEndian) 获取 指定 位 置 的 一 个 16 位 整数 值 | 
getUint16(byteOffset, littleEndian) 获取 指定 位 置 的 一 个 16 位 无 符号 型 整数 值 | 
getUint32(byteOffset, littleEndian) 获取 指定 位 置 的 一 个 32 位 无 符号 型 整数 值 | 
getFloat32(byteOffset littleEndian) 获取 指定 位 置 的 一 个 32 位 浮 点 数值 | 
getFloat64(byteOffset, littleEndian) 获取 指定 位 置 的 一 个 64 位 浮 点 数值 | 
setInt8(byteOffset, value) 设置 指定 位 置 的 一 个 8 位 整数 值 | 
setUint8(byteOffset, value) 设置 指定 位 置 的 一 个 8 位 无 符号 型 整数 值 | 
setInt16(byteOffset, value, littleEndian) 设置 指定 位 置 的 一 个 16 位 整数 值 | 
setUint16(byteOffset. value, littleEndian) 设置 指定 位 置 的 一 个 16 位 无 符号 型 整数 值 | 
setUint32(byteOffset. value, littleEndian) 设置 指定 位 置 的 一 个 32 位 无 符号 型 整数 值 | 
setFloat32(byteOffset, value. littleEndian) 设置 指定 位 置 的 一 个 32 位 浮 点 数值 | 
setFloat64(byteOffset, value, littleEndian) 设置 指定 位 置 的 一 个 64 位 浮 点 数值 


愉 提示， 在 上 述 方法 中 ， 各 个 参数 说 明 如 下 : 
byteOffset: 为 一 个 无 符号 长 整 型 数值 ， 表 示 设 置 或 读 取 整 数 所 在 位 置 与 DataView 对 | 
象 对 ArrayBuffer 缓存 区 的 开始 引用 位 置 之 间 相隔 多 少 个 字 节 。 
value: 为 无 符号 对 应 类 型 的 数值 ， 表 示 在 指定 位 置 进 行 设 定 的 整 型 数值 。 
littleEndian: 可 选 参数 ， 为 布尔 类 型 ， 判 断 该 整数 值 的 字 节 序 。 当 值 为 tue 时 ， 表 示 | 
以 little-endian 方式 设置 或 读 取 该 整数 值 ( 低地 址 存放 最 低 有 效 字 节 ); 当 参 数值 为 false | 
或 忽略 该 参数 值 时 ,表示 以 big-endian 方式 读 取 该 整数 值 ( 低地 址 存放 最 高 有 效 字 节 )。 | 
【示例 】 下 面 示例 演示 了 如 何 使 用 DataView 对 象 的 相关 方法 , 实现 对 文件 数据 进行 截取 和 检测 ， | 
演示 效果 如 图 11.10 所 示 。 
<script> 
window.onload = functionO{ 
var result=document.getElementById("result"): 
Var file=document.getElementById("file"): 
if (typeof FileReader 一 ndefined ){ 
result.innerHTML = "<hl> 当 前 浏览 器 不 支持 FileReader 对 象 <hl>": 
file setAttribute(disabled' 'disabled’ ): 
} 


上 

function file onchangeO{ 
Var file=document.getElementById("file").files[0]: 
这 WimageWw+/.test(file.type)){ 
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alert(" 请 选择 一 个 图 像 文件 ! 7 

Tetum:; 
Var slice=file.slice(0,4); 
Var reader = new FileReader(): 
Treader.readAsArrayBuffer(slice); 
Var type; 
reader.onload = function(e){ 
| var view=new DataView(buffer): 
Var magic=view.getInt32(0.false): 
这 magic<0) magic = magic + Ox100000000; 
Imagic=magic.toString(16).toUpperCaseO: 
if(magic.indexOf(FFD8FF") >=0) ”type="jpg 文件 "; 
if(magic.indexOf('89504E47") >=0) type="png 文件 "; 
if(magic.indexOf('47494638") >=0) 。 type="gif 文件 "; 
if(magic.indexOf('49492A00") >=0) 。 type="tif 文件 "; 
iftmagic.indexOf(424D') >=0) type="bmp 文件 "; 
document.getElementById("result").innerHTML = 文件 类 型 为 : '+type: 








} 
上 
| </script> 
| <input type="file" id="file" onchange="file_onchangeO|" /><br/> 
| <output id="result"></output> 
| 口 Ilocalhost8o8o/mysite 
| CC | © localhost:8080/mysite/te 
| 选择 文件 | 2 jpg 
| 文件 类 型 为 ，jpg 文 件 
| 
| 
| 图 11.10 判断 选取 文件 的 类 型 
【操作 步骤 】 


第 1 步 ， 在 上 面 示例 中 ， 先 在 页 面 中 设计 一 个 文件 控件 。 

第 2 步 ， 当 用 户 在 浏览 器 中 选取 一 个 图 像 文 件 后 ，JavaScript 先 检测 文件 类 型 ， 当 为 图 像 文件 后 ， 
| 再 使 用 File 对 象 的 slice0 方 法 将 该 文件 中 前 4 个 字 节 的 内 容 复 制 到 一 个 Blob 对 象 中 ,代码 如 下 所 示 。 
| Var file=document.getElementById("file").files[0]: 


| 这 WimageVvw-+H/test(file type)){ 
| alert(" 请 选择 一 个 图 像 文件 !"); 
| 


retum: 
} 
Var slice=file.slice(0.4): 
| 第 3 步 , 新建 FileReader 对 象 ,使 用 该 对 象 的 readAsArrayBuffer() 方 法 将 Blob 对 象 中 的 数据 读 取 
| 为 一 个 AmayBuffer 对 象 ， 代 码 如 下 所 示 。 
| 
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VarIeader=Dew FileReader(): | 
reader.readAsArrayBuffer(slice): | 
| 
第 4 步 ， 读 取 ArrayBuffer 对 象 后 ， 使 用 DataView 对 象 读 取 该 ArrayBuffer 缓存 区 中 位 于 开头 位 | 
置 的 一 个 32 位 整数 ， 代 码 如 下 所 示 。 | 
Teaderonload = fonction(e){ 


var bufferthisesult 
Var view=new DataView(buffer): 
Var magic=view.getInt32(0,false): 











第 5 步 ， 最 后 根据 该 整数 值 判 断 用 户 选 取 的 文件 类 型 ， 并 将 文件 类 型 显示 在 页 面 上 。 
if(magic<0) magic =Imagic + 0x100000000: 

Imagic=magic.toString(16).toUpperCase0: 

这 magic.indexOfCFFD8FF') >=0) type="jpg 文件 "; 

if(magic.indexOf('89504E47") >=0) type="png 文件 "; 

iftmagic.indexOf('47494638") >=0) 。 type="gif 文件 "; 

iftmagic.indexOf('49492A00") >=0) type="tif 文件 "; 

if(tmagic.indexOf('424D') >=0) 。 type="bmp 文件 "; 
document.getElementById("result").innerHTML = 文件 类 型 为 : '+type; 


11.5 FileSystem API 


HTML5 的 FileSystem API 可 以 将 数据 保存 到 本 地 磁盘 的 文件 系统 中 ， 实 现 数据 的 永久 保存 。 
11.5.1 认识 FileSystem API 


FileSystem API 包 括 两 部 分 内 容 : 一 部 分 内 容 为 除 后 台 线程 之 外 的 任何 场合 使 用 的 异步 API， 另 | 
-部 分 内 容 为 后 台 线 程 中 专用 的 同步 API。 本 节 仅 介绍 异步 API 内 容 。 

FileSystem API 具有 如 下 特性 : 

回 ”支持 跨 域 通信 ， 但 是 每 个 域 的 文件 系统 只 能 被 该 域 专用 ， 不 能 被 其 他 域 访问 。 | 

回 ”存储 的 数据 是 永久 的 , 不 能 被 浏览 器 随意 删除 , 但 是 存储 在 临时 文件 系统 中 的 数据 可 以 被 浏 | 
览 器 自行 删除 。 

当 Web 应 用 连续 发 出 多 次 对 文件 系统 的 操作 请 求 时 ， 每 一 个 请 求 都 将 得 到 响应 ， 同 时 第 一 | 
个 请 求 中 所 保存 的 数据 可 以 被 之 后 的 请 求 立 即 得 到 。 

目前 ， 只 有 Chrome 10+ 版 本 浏览 器 支持 FileSystem API。 


11.5.2 访问 FileSystem 


使 用 window 对 象 的 requestFileSystem() 方 法 可 以 请 求 访问 受到 浏览 器 沙 箱 保护 的 本 地 文件 系统 ， 
用 法 如 下 : 

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; | 

window.requestFileSystem(type. size, successCallback, opt_ errorCallback) : | 
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参数 说 明 如 下 : 

加 type: 设置 请 求 访问 的 文件 系统 使 用 的 文件 存储 空间 的 类 型 ， 取 值 包 括 : 
window.TEMPORARY 和 window.PERSISTENT。 当 值 为 window.TEMPORARY 时 ， 表 示 请 


会 内， 求 临时 的 存储 空间 ， 存 储 在 临时 存储 空间 中 的 数据 可 以 被 浏览 器 自行 删除 ; 当 值 为 window- 

em PERSISTENT 时 ,表示 请 求 永久 存储 空间 , 存储 在 该 空间 的 数据 不 能 被 浏览 器 在 用 户 不 知情 

的 情况 下 清除 ,只 能 通过 用 户 或 应 用 程序 来 清除 , 请 求 永久 存储 空间 需要 用 户 为 应 用 程序 指 
| 定 一 定 的 磁盘 配额 。 


| 回 size: 设置 请 求 的 文件 系统 使 用 的 文件 存储 空间 的 大 小 ， 尺 寸 为 byte。 
加 ”successCallback: 设置 请 求 成 功 时 执行 的 回调 函数 ， 该 回调 函数 的 参数 为 一 个 FileSystem 对 
象 ， 表 示 请 求 访问 的 文件 系统 对 象 。 
opt_errorCallback: 可 选 参数 ， 设 置 请 求 失败 时 执行 的 回调 函数 ， 该 回调 函数 的 参数 为 一 个 
FileError 对 象 ， 其 中 存放 了 请 求 失败 时 的 各 种 信息 。 
FileError 对 象 包含 code 属性 ， 其 值 为 FileSystem API 中 预定 义 的 常量 值 ， 说 明 如 下 所 示 : 
回 FileEmrorQUOTA_EXCEEDED_ERR: 文件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 配额 控制 
中 指定 的 空间 尺寸 。 
FileErmrorNOT_ FOUND _ERR: 未 找到 文件 或 目录 。 
FileError.SECURITY_ERR: 操作 不 当 引 起 安全 性 错误 。 
FileErrorJNVALID MODIFICATION ERR: 对 文件 或 目录 所 指定 的 操作 (如 文件 复制 、 删 
除 、 目 录 复制 、 目 录 删 除 等 处 理 ) 不 能 被 执行 。 
FileError.INVALID_STATE_ERR: 指定 的 状态 无 效 。 
FileError. ABORT_ERR: 当前 操作 被 终止 。 
FileError. NOT_ READABLE ERR: 指定 的 目录 或 文件 不 可 读 。 
FileError. ENCODING_ERR: 文字 编码 错误 。 
FileError.TYPE_ MISMATCH ERR: 用 户 企图 访问 目录 或 文件 ， 但 是 用 户 访问 的 目录 事实 上 
是 一 个 文件 或 用 户 访问 的 文件 事实 上 是 一 个 目录 。 
FileError. PATH _ EXISTS_ ERR: 用 户 指定 的 路 径 中 不 存在 需要 访问 的 目录 或 文件 。 
【示例 】 下 面 示例 演示 如 何在 Web 应 用 中 使 用 FileSystem API。 
<scrip> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
| var fs =null: 
| iftwindowrequestFileSysten) { 
| window.requestFileSystem(window.TEMPORARY. 1024*1024. 
function(filesystem) { 
fs= filesystem: 
}, errorHandler); 


加 回 


加 图 图 图 罗 加 


| 
| } 
| function errorHandler(FileError) { 
| switch (FileError.code) { 
case FileError QUOTA EXCEEDED ERR: 
console.log( 文 件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 ”); 
break: 
| case FileError. NOT_FOUND ERR: 
| console.log(' 未 找到 文件 或 目录 '); 
| break: 
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yy 
case FileError.SECURITY ERR: 
console.log( ' 操 作 不 当 引 起 安全 性 错误 "); 
break:; 
Case FileError. INVALID MODIFICATION ERR: 
console.log(' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 ); 


break: 
case FileError. INVALID STATE ERR: 
console.log( 指 定 的 状态 无 效 ); 
上 
上 
</script> 








在 上 面 代码 中 , 先 判断 浏览 器 是 否 支持 FileSystem APT, 如 果 支 持 则 调用 window.requestFileSystem() | 


请 求 访问 本 地 文件 系统 ， 如 果 请 求 失败 则 在 控制 台 显示 错误 信息 。 
11.5.3 ”申请 配额 


当 在 磁盘 中 保存 数据 时 ， 首 先 需 要 申请 一 定 的 磁盘 配额 。 在 Chrome 浏览 器 中 ， 可 以 通过 
window.webkitStorageInfo.requestQuota0 方 法 向 用 户 计算 机 申请 磁盘 配额 。 用 法 如 下 : 
window.webkitStorageInfo.requestQuota(PERSISTENT. 1024*1024. 
// 申 请 磁盘 配额 成 功 时 执行 的 回调 函数 


function(grantedBytes){ 
window.requestFilesystem(PERSISTENT., grantedBytes, onInitFs, errorHandler); 


上 
// 申 请 磁盘 配额 失败 时 执行 的 回调 函数 
errorHandler 

) 


该 方法 包含 4 个 参数 ， 说 明 如 下 : 





第 1 个 参数 : 为 TEMPORARY 或 PERSISTENT。 为 TEMPORARY 时 ， 表 示 为 临时 数据 申请 磁 | 


盘 配额 ， 为 PERSISTENT 时 ， 表 示 为 永久 数据 申请 磁盘 配额 。 


当 在 用 户 计算 机 中 保存 临时 数据 ,如 果 其 他 磁盘 空间 尺寸 不 足 时 ， 可 能 会 删除 应 用 程序 所 用 磁盘 | 
配额 中 的 数据 。 在 磁盘 配额 中 保存 数据 后 , 当 浏览 器 被 关闭 或 关闭 计算 机 电源 时 , 这 些 数 据 不 会 丢失 。 | 


第 2 个 参数 : 为 整数 值 ， 表 示 申 请 的 磁盘 空间 尺寸 ， 单 位 为 byte。 上 面 代码 将 参数 值 设 为 1024X | 


1024， 表 示 向 用 户 计 算 机 申请 1GB 的 磁盘 空间 。 


第 3 个 参数 : 为 一 个 函数 ， 表 示 申 请 磁盘 配额 成 功 时 执行 的 回调 函数 。 在 回调 函数 中 可 以 使 用 一 | 


个 参数 ， 参 数值 为 申请 成 功 的 磁盘 空间 尺寸 ， 单 位 为 byte。 


第 4 个 参数 : 为 一 个 函数 , 表示 申请 磁盘 配额 失败 时 执行 的 回调 函数 , 该 回调 函数 使 用 一 个 参数 ， | 


参数 值 为 一 个 FileError 对 象 ， 其 中 存放 申请 磁盘 配额 失败 时 的 各 种 错误 信息 。 


痊 提示 : 当 Web 应 用 首次 申请 磁盘 配额 成 功 后 ， 将 立即 获得 该 磁盘 配额 中 指定 的 磁盘 空间 ， 下 次 | 


使 用 该 磁盘 空间 时 不 需要 再 次 申请 。 


【示例 1】 下 面 示例 演示 了 如 何 申请 磁盘 配额 。 首 先 在 页 面 中 设计 一 个 文本 框 ， 当 用 户 在 文本 框 | 


控件 中 输入 需要 申请 的 磁盘 空间 尺寸 后 ，JavaScript 向 用 户 申请 磁盘 配额 ， 申 请 磁盘 配额 成 功 后 在 页 | 


面 中 显示 申请 的 磁盘 空间 尺寸 
<scrip> 
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function getQuotaO{ /申请 磁盘 配额 
Var size = document.getElementById("capacity").value: 
window.webkitStorageInfo requestQuota(PERSISTENT size. 
function(grantedBytes){ // 申 请 磁盘 配额 成 功 时 执行 的 回调 函数 





| var text=" 申 请 磁盘 配额 成 功 <br> 磁 盘 配额 尺寸:" 
| Var strBytes,intBytes: 
if(grantedBytes>=1024*1024*1024){ 
intBytes=Math.floor(grantedBytes/(1024*1024*1024)):; 
| text+=intBytes+"GB ": 


| grantedBytes=grantedBytes%(1024*1024*1024); 

站 

if(grantedBytes>=1024*1024){ 
intBytes=Math.floor(grantedBytes/(1024*1024)):; 
text+=intBytes+"MB "; 
grantedBytes=grantedBytes%(1024*1024); 


’ 
if(grantedBytes>=1024){ 
intBytes=Math.floor(grantedBytes/1024): 
textt=intBytes+"KB "; 
grantedBytes=grantedBytes%1024; 
! 
text+=grantedBytes+"Bytes"; 
document.getElementById("result").innerHTML = text: 
}, 
errorHandler); // 申 请 磁盘 配额 失败 时 执行 的 回调 函数 


function errorHandler(FileError) { 
switch (FileError.code) { 
case FileError. QUOTA EXCEEDED ERR: 
| console.log(' 文 件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 ); 
break; 
| case FileError. NOT_FOUND ERR: 
| 
| 


mm 


console.log(' 未 找到 文件 或 目录 '); 
break; 
case FileErrorSECURITY ERR: 
| console.log( ' 操 作 不 当 引 起 安全 性 错误 '); 
| break: 
| case FileError INVALID MODIFICATION ERR: 
| console.log( 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 "): 
break: 
case FileErrorINVALID STATE ERR: 
console.log( 指 定 的 状态 无 效 ): 
}; 
3 
</script> 
<form> 
<input type="text" id="capacity" value="1024"> 
<input type="button" value=" 申 请 磁盘 配额 " onclick="getQuota0"> 
</form> 
<output id="result" ></output> 
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在 Chrome 浏览 器 中 浏览 页 面 ， 然 后 在 文本 框 控件 中 输入 30000， 单 击 “ 申 请 磁盘 配额 ”按钮 ， 
则 JavaScript 会 自动 计算 出 当前 磁盘 配额 空间 的 大 小 ， 如 图 11.11 所 示 。 


二 
:2%B 30dBytes 





图 11.11 申请 磁盘 配额 


成 功 申请 磁盘 配额 之 后 , 可 以 使 用 window.webkitStorageInfo.queryUsageAndQuota() 方 法 查询 申请 
的 磁盘 配额 信息 ， 用 法 如 下 : 
window.webkitStorageInfo.queryUsageAndQuota(PERSISTENT. 
// 获 取 磁 盘 配 额 信 息 成 功 时 执行 的 回调 函数 


function(usage,quota) { 
// 代 码 





}， 
/获取 磁盘 配额 信息 失败 时 执行 的 回调 函数 


eITOT| 
六 
该 方法 包含 三 个 参数 ， 说 明 如 下 : 
第 1 个 参数 ， 可 选 TEMPORARY 或 PERSISTENT 常量 值 。 为 TEMPORARY 时 ， 表 示 查询 保存 | 
临时 数据 用 磁盘 配额 信息 ; 为 PERSISTENT 时 ， 表 示 查 询 保存 永久 数据 用 磁盘 配额 信息 。 
第 2 个 参数 : 函数 ， 表 示 查 询 磁盘 配额 信息 成 功 时 执行 的 回调 函数 。 在 回调 函数 中 可 以 使 用 两 个 | 
参数 ， 其 中 第 1 个 参数 为 磁盘 配额 中 已 用 磁盘 空间 尺寸 ,第 2 个 参数 表示 磁盘 配额 所 指定 的 全 部 磁盘 | 
空间 尺寸 ， 单 位 为 byte。 
第 3 个 参数 : 函数 ， 表 示 查 询 磁盘 配额 信息 失败 时 执行 的 回调 函数 。 回 调 函 数 的 参数 为 一 个 
FileError 对 象 ， 其 中 存放 了 查询 磁盘 配额 信息 失败 时 的 各 种 错误 信息 。 | 
【示例 2】 我 们 看 一 个 查询 磁盘 配额 信息 的 代码 示例 。 设 计 在 页 面 中 显示 一 个 “查询 磁盘 配额 信 | 
息 ” 按 钮 ， 当 用 户 单 击 该 按钮 时 ， 将 查询 用 户 申请 的 磁盘 配额 信息 。 查 询 成 功 时 将 磁盘 配额 中 用 户 已 | 
占用 磁盘 空间 尺寸 和 磁盘 配额 的 总 空间 尺寸 显示 在 页 面 中 ， 演 示 效 果 如 图 11.12 所 示 。 
<script> 
function queryQuotaO{ // 查 询 磁盘 配额 信息 
window.webkitStorageInfo.queryUsageAndQuota(PERSISTENT. 
function(usage,quota){ // 查 询 磁盘 配额 信息 成 功 时 执行 的 回调 函数 
var text=" 查 询 磁盘 配额 信息 成 功 <br> 已 用 磁盘 空间 :" 
var strBytes.intBytes: 
iftusage>=1024*1024*1024){ 
intBytes=Math floor(usage/(1024*1024*1024)): 
text+=intBytes+"GB "; 
usage=usage96(1024*1024*1024): 


if(lusage>=1024*1024){ | 
intBytes=Math floor(usage/1024*1024): | 
text+=intBytes+"MB ": ! 
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Usage=usage9%01024*1024: 
} 
ifusage>=1024){ 
intBytes=Math_ floor(usage/1024): 
textt=intBytes+"KB "; 
Usage=usage9%01024: 
text+=usapget+"Bytes": 
textt="<br> 磁 盘 配 额 的 总 空间 : ": 
这 quota>=1024*1024*1024){ 
intBytes=Math.floor(quota/(1024*1024*1024)); 
text+—intBytes+"GB "; 
quota=quota96(1024*1024*1024): 


if(quota>=1024*1024){ 
intBytes=Math.floor(quota/(1024*1024)):; 
text+=intBytes+"MB "; 
quota=quota%(1024*1024): 
! 
这 quota>=1024){ 
intBytes=Math floor(quota/1024):; 
text+=intBytes+"KB "; 
quota=quota%61024: 
} 
text+=quotat+"Bytes": 
document.getElementById("result").innerHTML = text; 
} 
errorHandler); /申请 磁盘 配额 失败 时 执行 的 回调 函数 
} 
function errorHandler(FileError) { 
/参考 上 面 示例 代码 中 errorHandler0 
} 
</script> 
<h1> 查 询 磁盘 配额 信息 </h1> 
<input type="button" value=" 查 询 磁盘 配额 信息 " onclick="queryQuota0"> 
<output id="result" ></output> 


© [©® locahost 


查询 磁盘 配额 信息 





全 全 二 图 11.12 查询 磁盘 配额 信息 
11.5.4 ”新 建文 件 
创建 文件 的 操作 思路 : 当 用 户 调用 requestFileSystem0 方 法 请 求 访问 本 地 文件 系统 时 ， 如 果 请 求 
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成 功 ， 则 执行 一 个 回调 函数 ， 这 个 回调 函数 中 包含 一 个 参数 ， 它 指向 可 以 获取 的 文件 系统 对 象 ， 该 文 | 
件 系统 对 象 包含 一 个 root 属性 ， 属 性 值 为 一 个 DirectoryEntry 对 象 ， 表 示 文 件 系统 的 根 目录 对 象 。 在 | 


请 求 成 功 时 执行 的 回调 函数 中 , 可 以 通过 文件 系统 的 根 目录 对 象 的 getFile0 方 法 在 根 目录 中 创建 文件 。 | 


getFile0 方 法 包含 4 个 参数 ， 简 单 说 明 如 下 : 

第 1 个 参数 :为 字符 串 值 ， 表 示 需 要 创建 或 获取 的 文件 名 。 

第 2 个 参数 : 为 一 个 自 定义 对 象 。 当 创建 文件 时 ， 必 须 将 该 对 象 的 create 属性 值 设 为 tue; 当 获 
取 文 件 时 ， 必 须 将 该 对 象 的 create 属性 值 设 为 false; 当 创 建文 件 时 ， 如 果 该 文件 已 存在 ， 则 覆盖 该 文 
件 ， 如果 该 文件 已 存在 ， 且 被 使 用 排他 方式 打开 ， 则 抛 出 错误 。 


第 3 个 参数 : 为 一 个 函数 ， 代 表 获 取 文 件 或 创建 文件 成 功 时 执行 的 回调 函数 ， 在 回调 函数 中 可 以 | 


使 用 一 个 参数 ， 参 数值 为 一 个 FileEntry 对 象 ， 表 示 成 功 创建 或 获取 的 文件 。 


现 
) 六 


第 4 个 参数 : 为 一 个 函数 ， 代 表 获 取 文 件 或 创建 文件 失败 时 执行 的 回调 函数 ， 参 数值 为 一 个 | 





FileError 对 象 ， 其 中 存放 了 获取 文件 或 创建 文件 失败 时 的 各 种 错误 信息 。 
FileEntry 对 象 表示 受到 沙 箱 保护 的 文件 系统 中 每 一 个 文件 。 该 对 象 包含 如 下 属性 : 


回 isFile: 区 分 对 象 是 否 为 文件 。 属 性 值 为 tue， 表 示 对 象 为 文件 ， 属 性 值 为 false， 表 示 该 对 | 


象 为 目录 。 


回 ”isDirectory: 区 分 对 象 是 否 为 目录 。 属 性 值 为 tue， 表 示 对 象 为 目录 ， 属 性 值 为 flse， 表 示 | 


该 对 象 为 文件 。 

name: 表示 该 文件 的 文件 名 ， 包 括 文件 的 扩展 名 。 

fullPath: 表示 该 文件 的 完整 路 径 。 

filesystem: 表示 该 文件 所 在 的 文件 系统 对 象 。 

另外 ，FileEntry 对 象 包括 remove0 〈 删 除 )、moveTo0 移动 )、copyTo0〈 复 制 ) 等 方法 。 


办 办 办 


【示例 】 下 面 示例 演示 了 创建 文件 的 基本 方法 。 在 页 面 中 设计 两 个 文本 框 和 一 个 “创建 文件 ” 按 | 
钮 ， 其 中 一 个 文本 框 控件 用 于 输入 文件 名 ， 另 一 个 文本 框 控件 用 于 输入 文件 大 小 ， 单 位 为 byte， 用 户 | 


输入 文件 名 及 文件 大 小 后 ， 单 击 “ 创 建文 件 ”按钮 ，JavaScript 会 在 文件 系统 中 的 根 目录 下 创建 文件 ，| 


并 将 创建 的 文件 信息 显示 在 页 面 中 ， 如 图 11.13 所 示 。 


<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
function createFileO{ // 创 建文 件 


Var size = document.getElementById("FileSize").value: 
window.requestFileSystem( PERSISTENT. size, 


function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var filename = document.getElementById("FileName").value: 
fs.root.getFile( // 创 建文 件 
filename. 
{create: true }, 


function(fileEntry){ // 创 建文 件 成 功 时 所 执行 的 回调 函数 
var text = "完整 路 径 : "+fileEntry fullPath+"<br>": 
text+= " 文 件 名 : "+fileEntry.name+"<br>"; 
document.getElementById("result").innerHTML = text: 


中 
errorHandler // 创 建文 件 失败 时 所 执行 的 回调 函数 
让 
乒 
errorHandler /请 求 文件 系统 失败 时 所 执行 的 回调 函数 
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function errorHandler(FileError) { /省 略 代码 } 

</script> 

<h1> 创 建文 件 </h1> 

文 件 名 : <input type="text" id="FileName" value="test.txt"><br/><br/> 
文件 大 小 : <input type="text" id="FileSize" value="1024"/>Bytes<br/><br/> 
<input type="button" value=" 创 建文 件 " onclick="createFile0"><br/><br/> 
<output id="result" ></output> 





TE 图 11.13 创建 文件 


< 航 注意 : 如 果 启 动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示 例 之 前 ， 应 先 运行 11.5.1 节 示 例 代码 ， 以 便 
请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ， 然 后 再 运行 11.5.2 节 示例 代码 ,以 便 申 请 磁 
盘 配额 。 


11.5.5” 写 入 数据 


HTMLS5 使 用 FileWriter 和 FileWriterSyne 对 象 执行 文件 写 入 操作 ， 其 中 FileWriterSync 对 象 用 于 
在 后 台 线 程 中 进行 文件 的 写 操作 ，FileWriter 对 象 用 于 除 后 台 线程 之 外 任何 场合 进行 写 操作 。 

在 FileSystem API 中 ， 当 使 用 DirectoryEntry 对 象 的 getFile0 方 法 成 功 获取 一 个 文件 对 象 之 后 ,可 
以 在 获取 文件 对 象 成 功 时 所 执行 的 回调 函数 中 ， 利 用 文件 对 象 的 createWriter0 方 法 创建 FileWriter 


对 象 。 


createWriter() 方 法 包含 两 个 参数 ， 分 别 为 创建 FileWriter 对 象 成 功 时 执行 的 回调 函数 和 失败 时 执 
行 的 回调 函数 。 在 创建 FileWriter 对 象 成 功 时 执行 的 回调 函数 中 ， 包 含 一 个 参数 ， 它 表示 FileWriter 
对 象 。 

使 用 FileWriter 对 象 的 write0 方 法 在 获取 到 的 文件 中 写 入 二 进 制 数据 ， 用 法 如 下 。 

fileWriter. write(data): 


参数 data 为 一 个 Blob 对 象 ， 表 示 要 写 入 的 二 进 制 数 据 。 
使 用 FileWriter 对 象 的 writeend 和 error 事 件 可 以 进行 监听 ,在 事件 回调 函数 中 可 以 使 用 一 个 对 象 ， 
它 表示 被 触发 的 事件 对 象 。 
【示例 】 以 11.5.4 节 示 例 为 基础 ， 对 createFile0 函 数 进行 修改 ， 当 用 户 单 击 “ 创 建文 件 ”按钮 时 ， 





首先 创建 一 个 文件 ， 在 创建 文件 成 功 时 执行 的 回调 函数 中 创建 一 个 Blob 对 象 ， 并 在 其 中 写 入 'Hello， 


World' 文 字 ， 当 写 文件 操作 成 功 时 在 页 面 中 显示 “ 写 文 件 操作 成 功 ” 文 字 ， 当 写 文 件 操作 失败 时 在 页 
面 中 显示 “ 写 文件 操作 失败 ”文字 ， 如 图 11.14 所 示 。 
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<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
function createFileO{ // 写 入 文件 操作 
Var size = document.getElementById("FileSize").value: 
window.requestFileSystem( PERSISTENT. size. 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var filename = document.getElementById("FileName").value: 
fs.root.getFile(filename,. // 创 建文 件 
{create: true}, 
function(fileEntry) { 
fileEntry.create Writer(function(fileWriter) { 
fileWriter.onwriteend = function(e) { 


document.getElementById("result").innerHTML =' 写 文件 操作 结束 '; 


上 
fileWriter.onerror = function(e) { 


document.getElementById("result").innerHTML=' 写 文件 操作 失败 : '; 


上 
var blob = new Blob(['Hello, World]): 
fileWriter write(blob): 
}. errorHandlen); 
}. errorHandler):; 
站 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
); 
} 
function errorHandler(FileError) { // 省 略 代 码 } 
</scrip> 


<h1> 创 建文 件 </hl> 

文 件 名 : <input type="text" id="FileName" value="test.txt"><br/><br/> 
文件 大 小 : <input type="text" id="FileSize" value="1024"/>Bytes<br/><br/> 
<input type="button" value=" 创 建文 件 " onclick="createFile0"><br/> 
<output id="result" ></output> 


[localhocus0eQ/mysite x 
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文件 名 hestiva 
文件 大 小 ，[1024 
创建 文件 
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< 角 注意 : 如 果 启动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示例 之 前 ， 应 先 运行 11.5.1 节 示例 代码 ， 以 便 | 
请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ,然后 再 运行 11.5.2 节 示例 代码 , 以 便 申请 磁 | 


盘 配 额 。 
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| 11.5.6 ”添加 数据 


向 文件 添加 数据 与 创建 文件 并 写 入 数据 操作 类 似 ， 区 别 在 于 在 获取 文件 之 后 ， 首 先 需要 使 用 
| FileWriter 对 象 的 seek0 方 法 将 文件 读 写 位 置 设置 到 文件 底部 ， 用 法 如 下 。 
5 | IE 
参数 值 为 长 整 型 数值 。 当 值 为 正 值 时 ， 表 示 文 件 读 写 位 置 与 文件 开头 处 之 间 的 距离 ， 单 位 为 byte 
| “〈 字 节 数 )， 当 值 为 负 值 时 ， 表 示 文 件 读 写 位 置 与 文件 结尾 处 之 间 的 距离 。 
【示例 】 下 面 示例 演示 了 如 何 向 指定 文件 添加 数据 。 在 页 面 中 设计 一 个 用 于 输入 文件 名 的 文本 框 
| 和 一 个 “添加 数据 ”按钮 ， 当 用 户 在 文件 名 文本 框 中 输入 文件 名 后 ， 单 击 “ 添 加 数据 ”按钮 ， 将 在 该 文 
| 件 中 添加 “新 数据 ” 文字， 追加 成 功 后 在 页 面 中 显示 “添加 数据 成 功 ”提示 信息 ， 演 示 效 果 如 图 11.15 
| 所 示 。 
| <script> 
‘window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; 
function addData0{ /向 文件 中 添加 数据 
window.requestFileSystem( PERSISTENT, 1024. 
function(fs){ /请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
Var filename = document.getElementById("fileName").value; 
全 rootgetEile(filename， /创建 文件 
{create:false}, 
function(fileEntry) { 
| fileEntry.create Writer(function(fileWriter) { 
| fileWriter.onwriteend = function(e) { 
| document.getElementById("result").innerHTML =' 添 加 数据 成 功 '; 
| }; 
fileWriter.onerror = function(e) { 
document.getElementById("result").innerHTML=' 添 加 数据 失败 : '; 








| } 
| fileWriter.seek(fileWriter length): 
| var blob =new Blob([' 新 数据 ]): 
| fleWriterwrite(blob): 
| }. errorHandler): 
| }. errorHandler): 
| 3 
| emrorHandler 。 /请求 文 件 系统 失败 时 所 执行 的 回调 函数 
| 
| , . 
”fnction errorHandler(FileError) { /省 略 代码 } 
</script> 
<h1> 添 加 数据 </h1l> 


| 

| 

| 文件 名 : <input type="text" id="fileName" value="test.txt"><br/><br/> 

| <input type="button" value=" 添 加 数据 " onclick="addData0"><br/> 
<output id="result" ></output> 


4 注意 : 如果 启动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示例 之 前 ， 应 先 运行 11.5.1 节 示例 代码 ， 以 便 
| 请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ,然后 再 运行 11.5.2 节 示 例 代码 ,以 便 申请 磁 
| 盘 配 额 。 
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图 11.15 添加 数据 


11.5.7 ” 读 取 数据 


在 FileSystem API 中 ， 使 用 FileReader 对 象 可 以 读 取 文件 ， 详 细 介 绍 可 以 参考 11.3 节 内 容 。 
在 文件 对 象 (FileEntry) 的 file0 方 法 中 包含 两 个 参数 ,分 别 表示 获取 文件 成 功 和 失败 时 执行 的 回 | 
调 函 数 ， 在 获取 文件 成 功 时 执行 的 回调 函数 中 ， 可 以 使 用 一 个 参数 ， 代 表 成 功 获取 的 文件 。 | 
【示例 】 下 面 示例 设计 一 个 用 于 输入 文件 名 的 文本 框 和 一 个 “ 读 取 文件 ”按钮 ， 当 用 户 在 文件 名 | 
文本 框 中 输入 文件 名 后 ， 单 击 “ 读 取 文件 ”按钮 ， 将 读 取 该 文件 中 的 内 容 ， 并 将 这 些 内 容 显 示 在 页 面 | 
上 的 textarea 元 素 中 ， 演 示 效 果 如 图 11.16 所 示 。 
<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 
function readFile0{ ”// 读 取 文件 
window.requestFileSystem( PERSISTENT. 1024. 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var filename = document.getElementById("FileName").value: 
仿 .root.getFile(filename， // 获 取 文件 对 象 
{create:false}. 
function(fileEntry) { // 获 取 文 件 对 象 成 功 时 所 执行 的 回调 函数 
fileEntry.file( /获取 文件 
function(file) {// 获 取 文 件 成 功 时 所 执行 的 回调 函数 
var reader = new FileReader(); 
Teader.onloadend = function(e) { 
Var txtArea = document.createElement('textarea’); 
txtArea.value = this.result: 
document.body.appendChild(txtArea): 








} 

Teader.readAsText(file): 
上 
errorHandler /获取 文件 失败 时 所 执行 的 回调 函数 


): 
errorHandler); // 获 取 文件 对 象 失败 时 所 执行 的 回调 函数 


EE 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
» 
} 
function errorHandler(FileError) { // 省 略 代码 } | 
</script> | 
<hl> 读 取 文件 <hl> | 
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| Ke 
So 
文件 名 : <input type="text" id="FileName" value="test.txt"><br/> <br/> 
<input type="button" value=" 读 取 文 件 " onclick="readFile0"> <br/> 
<output id="result" ></output> 





3 
回 
示 





图 11.16 读 取 并 显示 文件 内 容 
”4 前 注意 ;如 果 启 动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示例 之 前 ， 应 先 运 行 11.5.1 节 示例 代码 ， 以 便 


请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ,然后 再 运行 11.5.2 节 示 例 代码 , 以 便 申请 磁 
盘 配 额 。 


11.5.8 复制 文件 





| 
| 在 FileSystem API 中 ， 可 以 使 用 File 对 象 引用 磁盘 文件 ， 然 后 将 其 写 入 文件 系统 ， 用 法 如 下 : 

| HeWiiterwritetflej: 

| 参数 file 表示 用 户 磁盘 上 的 一 个 文件 对 象 。 也 可 以 为 一 个 Blob 对 象 ， 表 示 需 要 写 入 的 二 进 制 数 
| 

| 





据 。 在 HTML5 中 ，File 对 象 继承 Blob 对 象 ， 所 以 在 write0 方 法 中 可 以 使 用 File 对 象 作 为 参数 ， 表示 
| 使 用 某 个 文件 中 的 原始 数据 进行 写 文件 操作 。 
| 【示例 】 下 面 示例 将 用 户 磁盘 上 的 文件 复制 到 受 浏览 器 沙 箱 保护 的 文件 系统 中 。 先 在 页 面 上 设计 
| -个 文件 控件 ， 当 用 户 选 取 磁 盘 上 的 多 个 文件 后 , 将 用 户 选 取 文件 复制 到 受 浏览 嚣 沙 箱 保护 的 文件 系 
| 统 中 ， 复 制 成 功 后 ， 在 页 面 中 显示 所 有 被 复制 的 文件 名 ， 演 示 效 果 如 图 11.17 所 示 。 
1 a 

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
| function myfile_ onchangeO{ /复制 文件 
| var files=document.getElementById("myfile").files: 
| window.requestFileSystem( PERSISTENT 1024, 
| function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
for(var i= 0, file: file = files[i]: ++D{ 
(function(D { 
fs.root.getFile(file.name, {create: true}. function(fileEntry) { 
fileEntry.createWriter(function(fileWriter) { 
fileWriter. onwriteend = function(e) { 
document.getElementById("result").innerHTML+=' 复制 文件 名 为 : 
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}. errorHandler): | 
Dile): | 
) 
二 | 4 
ermrorHandler 。。“”// 请 求 文件 系统 失败 时 所 执行 的 回调 函数 | 凶 | 
六 | 
1 Er 
function errorHandler(FileError) { /省 略 代码 } | NOte 
</script> | 
<h1> 复 制 文件 <hl> | 
<input type="file" id=" le" onchange="myfile_onchangeO" multiple /><br> | 
<output id="result" ></output> | 





图 11.17 复制 文件 内 容 


< 全 注意 : 如 果 启 动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示 例 之 前 ， 应 先 运行 11.5.1 节 示 例 代 码 ， 以 便 | 
请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ,然后 再 运行 11.5.2 节 示 例 代 码 , 以 便 申请 磁 | 
盘 配 额 。 | 


11.5.9 删除 文件 


在 FileSystem API 中 ， 使 用 FileEntry 对 象 的 remove0 方 法 可 以 删除 该 文件 。remove0 方 法 包含 两 | 
个 参数 ， 分 别 为 删除 文件 成 功 和 失败 时 执行 的 回调 函数 。 

【示例 】 下 面 示例 演示 了 如 何 删除 指定 名 称 的 文件 。 在 页 面 中 设计 一 个 文本 框 和 一 个 “删除 文件 ” 
按钮 ， 用 户 输入 文件 名 后 ， 单 击 “ 删 除 文件 ”按钮 ， 在 文件 系统 中 该 文件 将 被 删除 ， 删 除 成 功 后 在 页 | 
面 中 显示 该 文件 被 删除 的 提示 信息 ， 演 示 效 果 如 图 11.18 所 示 。 








<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
function deleteFileO{ /删除 文件 


window.requestFileSystem( PERSISTENT 1024. 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
var filename = document.getElementById("fileName").value: 
全 Toot,getFile(// 获 取 文 件 
filename, 
{create: false }. 
fnction(fileEntry){ /获取 文件 成 功 时 所 执行 的 回调 函数 
fileEntry.remove( 
function| { /删除 文件 成 功 时 所 执行 的 回调 函数 | 
document.getElementById("result").innerHTML =fileEntry.name+' 文 件 被 删除 ': | 
小 | 
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errorHandler /删除 文件 失败 时 所 执行 的 回调 函数 


居 
二 
errorHandler /获取 文件 失败 时 所 执行 的 回调 函数 
儒 渭 D> 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
» 

| 
| } 
| function errorHandler(FileError) { /省 略 代码 } 

</script> 

<h1> 删 除 文件 </h1> 


文件 名 : <input type="text" id="fileName" value="test.txt"><br/><br/> 
<input type="button" value=" 删 除 文件 " onclick="deleteFile0"><br/> 
<output id="result" ></output> 


DD) localhosvaogo/mysite x 
© | @ locahosta0s0/mystte/testi ho 


出 除 文件 


文件 名 ，Jested 





[23 
test. txt 文 件 被 是 院 





于 2 
| 要 基 洲 坑 图 11.18 ”删除 文件 

”4 的 注意 : 如 果 启动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示例 之 前 ， 应 先 运行 11.5.1 节 示例 代码 ， 以 便 
| 请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ， 然 后 再 运行 11.5.2 节 示 例 代码 ,以 便 申请 磁 














盘 配额 
11.5.10 创建 目录 

视频 讲解 | 在 FileSystem API 中 ，DirectoryEntry 对 象 表示 一 个 目录 ， 该 对 象 包括 如 下 属性 ， 
| 回 isFile: 区 分 对 象 是 否 为 文件 。 属 性 值 为 tmue， 表 示 对 象 为 文件 ， 属 性 值 为 false， 表 示 该 对 
| 象 为 目录 。 
| 回 isDirectory: 区 分 对 象 是 否 为 目录 。 属 性 值 为 true， 表示 对 象 为 目录 ; 属性 值 为 false， 表 示 
| 该 对 象 为 文件 。 


回 ”name: 表示 该 目录 的 目录 名 。 

回 ”fallpath， 表示 该 目录 的 完整 路 径 。 

回 filesystem: 表示 该 目录 所 在 的 文件 系统 对 象 。 

DirectoryEntry 对 象 还 包括 一 些 可 以 创建 、 复 制 或 删除 目录 的 方法 。 

使 用 DirectoryEntry 对 象 的 getDirectory0 方 法 可 以 在 一 个 目录 中 创建 或 获取 子 目录 ， 该 方法 包含 
| 4 个 参数 ， 简 单 说 明 如 下 

| 第 1 个 参数 :为 一 个 字符 串 ， 表 示 需 要 创建 或 获取 的 子 目 录 名 。 

| 第 2 个 参数 :为 一 个 自 定义 对 象 。 当 创建 目录 时 ， 必 须 将 该 对 象 的 create 属性 值 设 定 为 tue; 当 
| 获取 目录 时 ， 必 须 将 该 对 象 的 ereate 属性 值 设 定 为 false。 
| 
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第 3 个 参数 : 为 一 个 函数 ， 表 示 获 取 子 目录 或 创建 子 目 录 成 功 时 执行 的 回调 函数 ， 在 回调 函数 中 | 
可 以 使 用 一 个 参数 ， 参 数 为 一 个 DirectoryEntry 对 象 ， 代 表 创建 或 获取 成 功 的 子 目 录 。 
第 4 个 参数 : 为 一 个 函数 ， 表 示 获 取 子 目录 或 创建 子 目录 失败 时 执行 的 回调 函数 ， 参 数值 为 一 个 | 
FileError 对 象 ， 其 中 存放 了 获取 子 目 录 或 创建 子 目 录 失 败 时 的 各 种 错误 信息 。 | 多 
【示例 1】 下 面 示例 演示 了 如 何 创建 一 个 子 目录 。 首先 在 页 面 中 设计 文本 框 , 用 于 输入 目录 名 称 ，| 
同时 添加 一 个 “创建 目录 ”按钮 。 输 入 目录 名 后 ， 单 击 “ 创 建 目录 ”按钮 ， 将 在 根 目录 下 创建 子 目 录 ， 
并 将 创建 的 目录 信息 显示 在 页 面 中 ， 演 示 效 果 如 图 11.19 所 示 。 | 
<script> | 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; | 
function createDirectoryO{ /创建 目录 
window.requestFileSystem( 
PERSISTENT, 
1024、 
function(fs){ /请 求 目录 系统 成 功 时 所 执行 的 回调 函数 
Var directoryName = document.getElementById("directoryName'").value: 
全 Toot.getDirectory(// 创 建 目录 
directoryName、 
{create: true }, 
function(dirEntry){ ”// 创 建 目录 成 功 时 所 执行 的 回调 函数 
vartext= "目录 路 径 : "+dirEntry.fullPath+"<br>"; 
text+= " 目 录 名 : "+dirEntry.name+"<br>"; 
document.getElementById("result").innerHTML = text: 





万 





6 
errorHandler /创建 目录 失败 时 所 执行 的 回调 函数 
六 


中 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
让 


} 

function errorHandler(FileError) { // 省 略 代码 } 

/script> 

<hl> 创 建 目录 </hl> 

目录 名 : <input type="text" id="directoryName" value="test"><br/><br/> 
<input type="button" value=" 创 建 目录 " onclick="createDirectory0"><br/> 
<output id="result" ></output> 





Er 
图 11.19 创建 目录 示例 效果 

在 创建 树 形 目 录 时 ， 如 果 文件 系统 中 不 存在 一 个 目录 ,直接 创 建 该 目录 下 的 子 目 录 时 ， 将 会 抛 出 | 
错误 。 但 是 有 时 应 用 程序 中 会 执行 某 个 操作 后 先 创建 子 目 录 ， 然 后 创建 该 目录 下 的 子 目录 。 | 


“257。 


| 人 


【示例 2】 下 面 示 例 演示 了 如 何 使 用 递归 法 按 正确 的 顺序 创建 子 目 录 。 在 页 面 中 显示 一 个 “创建 


”目录 ”按钮 ， 单 击 该 按钮 后 将 在 文件 系统 根 目录 下 创建 'one/two/three' 这 种 三 级 目录 ， 创 建 的 同时 在 页 





| 面 中 按 创建 顺序 显示 被 创建 的 每 一 个 子 目 录 ， 演 示 效 果 如 图 11.20 所 示 。 


<script> 
Var path = 'one/two/three': 
function createDirectory(rootDirEntry. folders){ /创建 目录 
window.requestFileSystem( 
PERSISTENT 
1024、 
function(fs){ 1/ 请求 文件 系统 成 功 时 所 执行 的 回调 函数 
createDir(fs.root, path.split(/)); // 使 用 递归 函数 创建 每 一 级 子 目录 
» 
errorHandler /请 求 文件 系统 失败 时 所 执行 的 回调 函数 
); 
} 
function createDir(rootDirEntry, folders){ /创建 目录 时 使 用 的 递归 函数 
让 (folders[0] =" | folders[0] 一 9{ /将 “Joo/Wbar” 之 类 的 目录 名 中 的 “./” 或 “/” 剔 除 
folders = folders.slice(1): 
} 
TootDirEntry.getDirectory(folders[0], {create: true}, 
function(dirEntry) { // 创 建 目录 成 功 时 所 执行 的 回调 函数 
if(folders length) { 
document.getElementById("result").innerHTML += dirEntry.name+" 目 录 已 创建 <br/>"; 
createDir(dirEntry, folders.slice(1)):; /调用 递归 函数 创建 子 目录 
| 
errorHandler // 创 建 目录 失败 时 所 执行 的 回调 函数 
): 
} 
function errorHandler(FileError) { // 省 略 代码 } 
</script> 
<h1> 创 建树 形 目 录 </h1> 


<input type="button" value=" 创 建 目录 " onclick="createDirectory0"><br/> 
<output id="result" ></output> 


D localhorssos0myite x 


C | © localhost a0e0 


创建 树 形 目录 





示例 效果 图 11.20 创建 树 形 结构 目录 


4 注意 : 如 果 启动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示例 之 前 ， 应 先 运行 11.5.1 节 示 合 代码 ， 以 便 


请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ， 然 后 再 运行 11.5.2 节 示 例 代码 ， 以 便 申 请 磁 
盘 配 额 。 
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11.5.11 读 取 目 录 
在 FileSystem API 中 ， 读 取 目 录 的 操作 步骤 : 








第 1 步 ， 使 








DirectoryEntry 对 象 的 createReader() 方 法 创建 DirectoryReader 对 象 ， 用 法 如 下 。 


Var dirReader=fs.root.createReaderO: 
该 方法 不 包含 任何 参数 ， 返 回 值 为 创建 的 DirectoryEntry 对 象 。 


第 2 步 ， 在 创 





建 DirectoryEntry 对 象 之 后 ， 使 用 该 对 象 的 readEntries() 方 法 读 取 目录 。 该 方法 包含 


两 个 参数 ， 简 单 说 明 如 下 : 

第 1 个 参数 为 读 取 目 录 成 功 时 执行 的 回调 函数 。 回调 函数 包含 一 个 参数 , 代表 被 读 取 的 该 日 

录 中 目录 及 文件 的 集合 。 

第 2 个 参数 为 读 取 目 录 失 败 时 执行 的 回调 函数 。 

第 3 步 ， 在 异步 FileSystem API 中 ， 不 能 保证 一 次 就 能 读 取出 该 目录 中 的 所 有 目录 及 文件 ， 应 该 
多 次 使 用 readEntries() 方 法 ， 一 直到 回调 函数 的 参数 集合 的 长 度 为 0 为 止 ， 表 示 不 再 读 出 目录 或 文件 。 

【示例 】 下 面 示例 演示 了 如 何 读 取 目 录 。 在 页 面 中 设计 一 个 “ 读 取 目 录 ” 按 钮 ， 单 击 该 按钮 将 读 | 
取 文 件 系统 根 目录 中 的 所 有 目录 和 文件 ， 并 将 其 显示 在 页 面 上 ， 演 示 效 果 如 图 11.21 所 示 。 


<script> 


window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
function readDirectoryO{ // 读 取 目 录 
window.requestFileSystem( PERSISTENT. 1024. 
function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
Var dirReader = fs.root.createReader(): 
var entries = []: 


var readEntries = functionO { // 调 用 readEntries 直到 读 不 出 目录 或 文件 


dirReader.readEntries ( 
function(results) { // 读 取 目 录 成 功 时 执行 的 回调 函数 
if (!results.length) { 
listResults(entries.sortO): 
3 
else { 
entries = entries.concat(toArray(results)): 
readEntries(): 
} 
} 
errorHandler // 读 取 目 录 失败 时 执行 的 回调 函数 
有 
} 
readEntries(): /开始 读 取 目 录 
} 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
): 
} 
function listResults(entries) { 
var type: 
entries.forEach(function(entry. i) { 
if(entryiisFile) 


type=" 文 件 : "+entry.name: 


“259。 








| 


else 
type=" 目 录 : "+entry.name; 
document.getElementById("result").innerHTML+=type+"<br/>": 
DD; 


function toArray(list) { return Array.prototype.slice.call(list || [], 0):} 
function errorHandler(FileError) { /省 略 代码 } 

</script> 

| <hl> 读 取 目 录 </hl> 

| <input type="button" value=" 读 取 目 录 " onclick="readDirectory0"><br/> 
<output id="result" ></output> 





DD localhortsog0/mysite x 


© [© localhost 


读 取 日 录 


ELE 
目录 : tes 


EE 








示例 效果 图 11.21 读 取 目 录 
11.5.12 ”删除 目录 
视频 讲解 | 在 FileSystem API 中 ， 使 用 DirectoryEntry 对 象 的 remove() 方 法 可 以 删除 该 目录 。 该 方法 包含 两 


| 个 参数 ， 分 别 为 删除 目录 成 功 时 执行 的 回调 函数 和 删除 目录 失败 时 执行 的 回调 函数 。 当 删除 目录 时 ， 
| 如 果 该 目录 中 含有 文件 或 子 目 录 ， 则 将 抛 出 错误 。 

| 【示例 】 下 面 示例 演示 了 如 何 删除 文件 系统 中 某 个 目录 。 在 页 面 中 设计 一 个 文本 框 控 件 和 一 个 
| “删除 目录 ”按钮 ， 当 在 文本 框 中 输入 目录 名 后 ， 单 击 “ 删 除 目录 ”按钮 ， 将 在 文件 系统 中 删除 该 目 
| 录 ， 删 除 成 功 后 在 页 面 中 显示 提示 信息 ， 演 示 效 果 如 图 11.22 所 示 。 


| 
| 
| <script> 





window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 
function deleteDirectoryO{ // 删 除 目录 
window.requestFileSystem( 
PERSISTENT. 


| 
| 1024. 
| function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 

Var directoryName = document.getElementById("directoyName").value: 


fs.root.getDirectory( /获取 目录 
| directoryName, 
| { create: false }. 
| function(dirEntry){ // 获 取 目 录 成 功 时 所 执行 的 回调 函数 
| dirEntry.removeRecursively( 


function0 { 。”// 删 除 目 录 成 功 时 所 执行 的 回调 函数 
document.getElementById("result").innerHTML =dirEntry name+' 目 录 被 删除 ': 

局 

errorHandler /删除 目录 失败 时 所 执行 的 回调 函数 


“260 


第 11 章 文件 操作 一 5 





errorHandler /获取 目录 失败 时 所 执行 的 回调 函数 
» 
下 
errorHandler /请求 文件 系统 失败 时 所 执行 的 回调 函数 
. 

上 
fonction errorHandler(FileError) { /省略 代码 } 
</script> 
<h1> 删 除 目 录 </h1> 





目录 名 : <input type="text" id="directoyName" value="test"><br/><br/> 
<input type="button" value=" 删 除 目录 " onclick="deleteDirectory0"><br/> 
<output id="result" ></output> 





图 11.22 删除 目录 洒 鲁 加 时 


窑 提示 : 当 目 录 中 含有 子 目录 或 文件 时 ， 要 将 该 目录 包括 其 中 的 子 目 录 及 文件 一 并 删除 时 ， 可 以 使 | 
用 DirectoryEntry 对 象 的 removeRecursively0 方 法 删除 该 目录 。 该 方法 包含 参数 及 其 说 明 | 
与 remove0 方 法 相同 ， 这 两 个 方法 的 不 同 仅 在 于 remove0 方 法 只 能 删除 空 目录 ,而 | 
removeRecursively0 方 法 可 以 连 该 目录 下 的 所 有 子 目 录 及 文件 一 并 删除 。 


11.5.13 ”复制 目录 


在 FileSystem API 中 ， 使 用 FileEntry 对 象 或 DirectoryEntry 对 象 的 copyTo0 方 法 可 以 将 一 个 目录 | 
中 的 文件 或 子 日 录 复制 到 另 一 个 目录 中 。 该 方法 包含 四 个 参数 : | 

第 1 个 参数 : 为 一 个 DirectoryEntry 对 象 ， 指 定 将 文件 或 目录 复制 到 哪个 目标 目录 中 。 

第 2 个 参数 : 可 选 参数 ， 为 一 个 字符 串 值 ， 用 于 指定 复制 后 的 文件 名 或 目录 名 。 

第 3 个 参数 : 可 选 参数 ， 为 一 个 函数 ， 代 表 复 制 成 功 后 执行 的 回调 函数 。 

第 4 个 参数 : 可 选 参数 ， 为 一 个 函数 ， 代 表 复 制 失败 后 执行 的 回调 函数 。 

【示例 】 下 面 示例 使 用 FileSystem API 复制 文件 系统 中 文件 。 页 面包 含 三 个 文本 框 控件 和 一 个 | 
“复制 文件 ”按钮 ， 其 中 一 个 文本 框 控件 用 于 用 户 输入 复制 源 目录 ， 一 个 文本 框 控件 用 于 用 户 输入 复 | 
制 的 目标 目录 ， 一 个 文本 框 控件 用 于 输入 被 复制 的 文件 名 ， 用 户 输入 复制 源 目录 、 复 制 目标 目录 与 被 | 
复制 的 文件 名 并 单 击 “ 复 制 文件 ”按钮 后 ， 将 被 复制 的 文件 从 复制 源 目录 复制 到 目标 目录 中 ， 复 制 成 | 
功 后 在 页 面 中 显示 提示 信息 ， 如 图 11.23 所 示 。 

<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; 
function copyFileO{ /复制 文件 

Var src=document.getElementById("sre").value: 

Var dest=document.getElementById("dest").value: 本 
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Var fileName=document.getElementById("fileName").value: 
window.requestFileSystem(window.PERSISTENT., 1024*1024. function(fs) { 
copy(fs.root, sret+'/+fileName. dest+"/"): 
}. errorHandler): 
} 
function copy(cwd, src, dest) { 
cwd.getFile(src. {create:false}. 
function(fileEntry) { // 获 取 被 复制 文件 成 功 时 执行 的 回调 函数 
| cwd.getDirectory(dest, {create:false}, 
| function(dirEntry) { /获取 复制 目标 目录 成 功 时 执行 的 回调 函数 
fileEntry.copyTo(dirEntry,fileEntry.name, 
function0 { /复制 文件 操作 成 功 时 执行 的 回调 函数 
document getElementById("result").innerHTML =' 文 件 复制 成 功 '; 





中 
errorHandler /复制 文件 操作 失败 时 执行 的 回调 函数 


} 


| errorHandler); /获取 复制 目标 目录 失败 时 执行 的 回调 函数 
| }, errorHandler); // 获 取 被 复制 文件 失败 时 执行 的 回调 函数 
| } 
| function errorHandler(FileError) { /| 省 略 代码 } 
| </script> 
<h1> 复 制 文件 </hl> 


| 源 目 录 : <input type="text" id=-"src"><br> 

| 目标 目录 : <input type="text" id="dest"><br/> 

| 复制 文件 ，<input type="text" id="fileName"><br/> 

| <input type="button" value=" 复 制 文件 " onclick="copyFile0"> 
<output id="result" ></output> 


D locolhosta0so/mysite 


| 
| 
| © [Oceanes 
| 
| 


复制 文件 





示例 效果 图 11.23 复制 目录 中 文件 
11.5.14” 重 命名 目录 


视频 讲解 | 在 FileSystem API 中 ,使 用 FileEntry 对 象 或 DirectoryEntry 对 象 的 moveTo0 方 法 将 一 个 目录 中 的 
| 文件 或 子 目录 复制 到 另 一 个 目录 中 。 该 方法 所 用 参数 及 其 说 明 与 copyTo0 方 法 完全 相同 。 
| 两 个 方法 不 同 点 : 仅 在 于 使 用 copyTo0 方 法 时 ， 将 把 指定 文件 或 目录 从 复制 源 目 录 复 制 到 目标 目 
| 录 中 ， 复 制 后 复制 源 目录 中 该 文件 或 目录 依然 存在 ， 而 使 用 moveTo0 方 法 时 ， 将 把 指定 文件 或 目录 
| 从 移动 源 目 录 移 动 到 目标 目录 中 ， 移 动 后 移动 源 目录 中 该 文件 或 目录 被 删除 。 


| ae 
| 宕 提示 : 用 户 可 以 在 11.5.13 节 示 例 基 础 上 ， 把 copyTo() 方 法 换 为 moveTo() 方 法 进行 测试 练习 。 





“262。 


第 ]] 章 文件 操作 一 $9 | 


【示例 】 下 面 示例 演示 了 如 何 实现 文件 的 重 命名 操作 。 先 在 页 面 中 设计 三 个 文本 框 和 一 个 “文件 | 
重 命名 ”按钮 ， 当 在 三 个 文本 框 中 分 别 输入 文件 所 属 目 录 、 文件 名 与 新 的 文件 名 , 单 击 “ 文 件 重 命名 ”| 
按钮 后 ， 将 该 文件 名 修改 为 新 的 文件 名 ， 修 改 成 功 后 在 页 面 上 显示 提示 信息 ， 如 图 11.24 所 示 。 | 
np | 好 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: st 
function renameFileO{ // 文 件 重 命名 
var folder=document.getElementById("folder").value: | 
var oldFileName=document.getElementById("oldFileName").value: | 
var newFileName=document.getElementById("newFileName").value; | 
windowrequestFileSystem(windowPERSISTENT 1024*1024. function(fs) { | 
rename(fs.root, folder++oldFileName.newFileName,folder+/): 
}, errorHandler): 
} 
function rename(cwd.oldFileName.newFileName ,folder) { 
cwd.getFile(oldFileName. {create:false}. 


function(fileEntry) { // 获 取 文件 成 功 时 执行 的 回调 函数 
cwd.getDirectory(folder, {create:false}, | 
function(folder) { // 获 取 文 件 目录 成 功 时 执行 的 回调 函数 | 
fileEntrymoveTo(foldernewFileName、 | 
function0 { /文件 重 命名 操作 成 功 时 执行 的 回调 函数 | 
document.getElementById("result").innerHTML = 修改 文件 名 成 功 .新 文件 名 : | 
‘+newFileName; | 
站 | 
errorHandler /文件 重 命名 操作 失败 时 执行 的 回调 函数 | 
D | 
» | 
errorHandler): /获取 目录 失败 时 执行 的 回调 函数 | 
}, errorHandler): // 获 取 文件 失败 时 执行 的 回调 函数 | 
} | 
function errorHandler(FileError) { 1/ 省 略 代码 } | 
</script> | 
1 
<hl> 文 件 重 命名 </hl> | 


目 录 : <input type="text" id="folder"><br/> 

文件 名 : <input type="text" id="oldFileName"><br/> 

新 文件 名 : <input type="text" id="newFileName"><br/> 

<input type="button" value=" 文 件 重 命名 " onclick="renameFile0"><br/> 
<output id="result" ></output> 





图 11.24 文件 重 命名 
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“11.5.15 ”使 用 filesystem:URL 





i 在 FileSystem API 中 ， 可 以 使 用 带 有 “filesystem: ”前缀 的 URL， 这 种 URL 通常 用 在 页 面 上 元 素 
全 /站 | 的 href 属性 值 或 src 属性 值 中 。 
用 户 可 以 通过 window 对 象 的 resolveLocalFileSystemURL( 方 法 根据 一 个 带 有 “filesystem:” 前 组 
的 URL 获取 FileEntry 对 象 。 该 方法 包含 三 个 参数 ， 简 单 说 明 如 下 : 
| 第 1 个 参数 : 为 一 个 带 有 “filesystem:” 前 级 的 URL。 
| 第 2 个 参数 : 为 一 个 函数 ， 表 示 获 取 文 件 对 象 成 功 时 执行 的 回调 函数 ， 该 函数 使 用 一 个 参数 ， 表 
| 示 获 取 到 的 文件 对 象 。 
第 3 个 参数 : 为 一 个 函数 , 表示 获取 文件 对 象 失败 时 执行 的 回调 函数 , 该 回调 函数 使 用 一 个 参数 ， 
参数 值 为 一 个 FileError 对 象 ， 其 中 存放 获取 文件 对 象 失败 时 的 各 种 错误 信息 。 
【示例 】 下 面 示例 演示 了 “filesystem:” 前 级 的 URL 和 resolveLocalFileSystemURL0 方 法 基本 应 
用 。 在 页 面 中 显示 一 个 文本 框 、 一 个 “创建 图 片 ”按钮 与 一 个 “显示 文件 名 ”按钮 ， 当 输入 图 片 文件 
| 名 后 ， 单 击 “ 创 建 图 片 ”按钮 ， 页 面 中 显示 该 图 片 ， 单 击 “ 显 示 文件 名 ”按钮 ， 页 面 中 显示 该 图 片 文 
| 件 的 文件 名 ， 演 示 效 果 如 图 11.25 所 示 。 
<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; 
Var fileSystemURL: 
function createImgO{ 1/ 创建 图 片 
window.requestFileSystem( 
| PERSISTENT, 
| 1024. 
| function(fs){ // 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 
| var filename =document.getElementById("fileName").value: 
仿 root.getFile(filename， // 获 取 文件 对 象 
{create:false}, 
| function(fileEntry) { // 获 取 文件 成 功 时 所 执行 的 回调 函数 
| Var img = document.createElement(img’): 
| 
| 











fileSystemURL=fileEntry.toURLO: 

img.src = fileSystemURL: 
document.getElementById("form1").appendChild(imeg): 
document.getElementById("btnGetFile").disabled=false: 


| 
| 区 
| errorHandler): // 获 取 文件 失败 时 所 执行 的 回调 函数 
| | 
errorHandler // 请 求 文件 系统 失败 时 所 执行 的 回调 函数 
); 
| 
| function getFileO{ 
| window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL |lwindow.webkitResolveLocal 
FileSystemURL: 
window.resolveLocalFileSystemURL(fileSystemURL., 
function(fileEntry) { // 获 取 文件 对 象 成 功 时 执行 的 回调 函数 
document.getElementById("result") innerHTML=" 文 件 名 为 :"+fileEntry name: 

上 

errorHandler /获取 文件 对 象 失败 时 执行 的 回调 函数 
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天 
} 
function errorHandler(FileError) { /省 略 代码 } 
</script> 


<h1> 使 用 filesystem 前 级 的 URL</h1> 

<form id="forml"> 

<input type="text" id="fileName"> 

<input type="button" id="btnCreateImg" value=" 创 建 图 片 " onclick="createImgO"> 

<input type="button" id="btnGetFile" value=" 显 示 文 件 名 " onclick="getFile0"” disabled><br/> 
</form> 

<output id="result" ></output> 





DD localhortsos0/mysite x 


C [© localhost 080/mysite/testT .html 


使 用 filesystem 前 级 的 URL 


| 
| 
| 
| 
| 
tjpg 创 渤 团 片 | | 于 示 文 件 名 ! 








国 回 
回 
示例 效果 


图 11.25 显示 文件 
< 拟 注意 :在 测试 本 节 示例 之 前 ， 应 先 运行 11.5.7 节 示 例 代 码 ， 在 文件 系统 中 复制 一 个 文件 。 


11.6 案例 : 设计 资源 管理 器 





视频 讲解 


本 例 设 计 在 页 面 中 显示 一 个 文件 控件 、 三 个 按钮 。 当 页 面 打开 时 显示 文件 系统 根 目 录 下 的 所 有 文 | 
件 与 目录 , 通过 文件 控件 可 以 将 磁盘 上 一 些 文件 复制 到 文件 系统 的 根 目录 下 , 复制 完成 之 后 用 户 可 以 | 
通过 单 击 “ 保 存 ” 按 钮 来 重新 显示 文件 系统 根 目录 下 的 所 有 文件 与 目录 ， 单 击 “ 清 空 ”按钮 可 以 删除 | 





文件 系统 根 目录 下 的 所 有 文件 与 目录 ， 示 例 演示 效果 如 图 11.26 所 示 。 


E EE 2 





DD localhosta0s0/mysite x 卫 [localhosta080/mysite x 全 


© |© localhost:3080/mysite/test1 女 | : CG |© localhost:8080/mysite/test1 女 | 让 


选择 文件 | 未 选择 任何 文件 保存 远 择 文件] 33 png 保存 


医 二 目 a.pmme 
目 22.pmg 


目 11L.pme 


EE 二 


图 11.26 操作 文件 系统 
具体 代码 解析 请 扫 码 学 习 。 





*。265。 


LA 


11.7 在 线 练 习 





"206" 





HTML5 通信 


HTML5 新 增多 种 通信 技术 ， 如 路 文档 消息 传输 功能 ， 使 用 WebSockets API 接口 ， 通 过 
socket 端口 传 逐 数据 的 功能 。 使 用 路 文档 消息 传输 功能 ， 可 以 在 不 同 网 页 文档 、 不 同 端口 、 
不 同 域 之 间 进 行 消息 的 传递 。 使 用 WebSockets API， 可 以 让 客户 端 与 服务 器 端 通过 socket 
端口 来 传 逐 数据 ,这 样 可 以 实现 数据 推送 技术 , 服务 器 端 不 再 是 被 动 地 等 待 客户 端 发 出 请 求 ， 
只 要 客户 端 与 服务 器 端 建立 了 一 次 连接 之 后 ,服务器 端 就 可 以 在 需要 的 时 候 ， 主 动 地 将 数据 
推送 到 客户 端 ， 直 到 客户 端 显 式 关 闭 这 个 连接 - 


【 学 习 重 点 】 

WI 事 握 怎样 实现 不 同 页 面 、 不 同 端口 、 不 同 域 之 间 的 消息 传递 。 

MH 了 解 WebSockets 通信 技术 的 基本 知识 。 

加 能够 在 客户 端 与 服务 器 端 之 间 建 立 socket 连接 , 并 且 通 过 这 个 连接 进行 消息 的 传递 。 


2 





| KX% 
| 12.1 跨 文 档 消 息 传 遂 


在 Web 开发 中 ， 跨 文档 消息 传递 存在 多 种 形式 : 
Note 客户 端 与 服务 器 端 之 间 。 
回 ”页 面 与 其 打开 的 新 窗口 之 间 。 


多 窗口 之 间 。 
页 面 与 内 嵌 这 ame 之 间 。 

第 一 种 为 传统 用 法 , 借助 服务 器 技术 实现 , 必须 在 同 源 之 间 通信 , 而 后 面 三 种 可 以 实现 跨 域 通信 ， 
| 在 JavaScript 脚本 中 直接 完成 。 

| 


| 12.1.1 postMessage 基础 





| 
| HTMLS 增加 了 在 网 页 文档 之 间 互相 接收 与 发 送信 息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 到 目标 网 
| 页 所 在 窗口 对 象 的 实例 ， 不 仅 同 源 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 通信 。 
| 在 HIML5 中 ， 跨 域 通信 的 核心 是 postMessage0 方 法 ， 该 方法 的 主要 功能 是 : 向 另 一 个 地 方 传递 
| 数据 。 另 一 个 地 方 可 以 是 包含 在 当前 页 面 中 的 这 ame 元 素 , 或 者 由 当前 页 面 弹 出 的 窗口 ， 以 及 框架 集 
| 中 其 他 窗口 。postMessage0 方 法 用 法 如 下 : 
| otherWindow.postMessage(message,origin): 
| 参数 说 明 : 
| otherWindow: 表示 发 送 消息 的 目标 窗口 对 象 。 
| message: 发 送 的 消息 文本 , 可 以 是 数字 、 字 符 串 等 .HTMLS5 规范 定义 该 参数 可 以 是 JavaScript 
| 的 任意 基本 类 型 或 者 可 复制 的 对 象 , 但 是 部 分 浏览 器 只 能 处 理 字符 串 参数 , 考虑 浏览 器 兼容 
| 性 ， 可 以 在 传递 参数 时 ， 使 用 JSON.stringify0 方 法 对 参数 对 象 序列 化 ， 接 收 数 据 后 再 用 
| JSON.parse0 方 法 把 序列 号 字符 串 转换 为 对 象 。 
| origin: 字符 串 参 数 ， 设 置 目标 窗口 的 源 ， 格 式 为 “协议 + 主机 + 端口 号 [HURL]”，URL 会 被 
| 忽略 ， 可 以 不 写 ， 设 置 该 参数 主要 是 为 了 安全 。postMessage() 只 会 将 message 传递 给 指定 窗 
| 口 ， 也 可 以 设置 该 参数 为 “*”， 这 样 可 以 传递 给 任意 窗口 ， 如 果 设 置 为 “/”， 则 定义 目标 
| 窗口 与 当前 窗口 同 源 。 
| 目标 窗口 接收 到 消息 之 后 ， 会 触发 window 对 象 的 message 事件 。 这 个 事件 以 异步 形式 触发 ， 因 
此 从 发 送 消息 到 接收 消息 ， 即 触发 目标 窗口 的 message 事件 ， 可 能 存在 延迟 现象 。 

触发 message 事件 后 ， 传 递 给 message 处 理 程序 的 事件 对 象 包含 3 个 重要 信息 。 

data: 作为 postMessage0 方 法 第 1 个 参数 传 入 的 字符 串 数据 。 

回 origin: 发 送 消息 的 文档 所 在 域 。 

source: 发 送 消息 的 文档 的 window 对 象 的 代理 。 这 个 代理 对 象 主要 用 于 在 发 送 上 一 条 消息 

的 窗口 中 调用 postMessage() 方 法 。 如 果 发 送 消息 的 窗口 来 自 同一 个 域 , 该 对 象 就 是 window。 

| 4 注意 : eventsource 只 是 window 对 象 的 代理 ， 不 是 引用 window 对 象 。 用 户 可 以 通过 这 个 代理 调 
| 用 postMessage() 方 法 ， 但 不 能 访问 window 对 象 的 任何 信息 。 
| 
| 
| 


目前 ，Firefox 4+、Safari 4+、Chrome 8+、Opera 10+、IE 8+ 版 本 浏览 器 都 支持 这 种 跨 文档 的 消息 
| 传输 方式 。 
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【示例 】 下 面 代码 段 定义 了 HIMLS5 页 面 与 内 翌 框 架 页 面 之 间 通 信 的 基本 设计 模式 。 
// 发 消息 页 面 


Var iframWindow = document.getElementById("myframe"): 
这 amWindow.postMessage(" 发 送 消息 ". "http://www.othersite.com"); | 


// 接 消息 页 面 
var EventUtil = {// 定 义 事件 处 理 基 本 模块 | 
addHandler: function (element., type. handler) { // 注 册 事件 | 
if (element.addEventListener) { /兼容 DOM 模型 | 
clement.addEventListener(type. handler false): 
} else if (element.attachEvent) { 1/ 兼容 正 模型 
element.attachEvent("on" + type, handler); 
} else { 1/ 兼容 传统 模型 
element["on" + type] = handler: 





上 
} 
上 
EventUtil.addHandler(window, "message", function (event) { /为 window 注册 message 事件 
/确保 发 送 消息 的 域 是 已 知 的 域 
if (event.origin 一 "http://www.mysite.com") { 
// 处 理 接收 到 的 数据 
ProcessMessage(event.data): 
/可 选 操作 : 向 来 源 窗口 发 送 回执 
event.source.postMessage(" 反 馈 消息 ". event.origin); 
} 


D: 
12.1.2 ”案例 : 设计 简单 的 跨 域 通话 


本 节 示 例 演示 了 如 何 实现 跨 文档 消息 传输 。 示 例 包 含 两 个 页 面 : index.html 和 called.html， 其 中 频 讲解 
index.html 为 主 叫 页 面 ，called.html 为 被 叫 页 面 。 首 先 ， 主 页 面向 内 嵌 fame 的 被 叫 页 面 发 送 消息 ， 
被 叫 页 面 接收 消息 ， 显 示 在 内 插页 面 中 ， 然 后 向 主 叫 页 面 回话 消息 。 最 后 ， 主 叫 页 面 接收 消息 后 ， 将 
该 消息 显示 在 主页 面 内 ， 整 个 示例 演示 效果 如 图 12.1 所 示 。 








主 叫 页 (index. html) 被 叫 页 (called.html) ! 


对 六 域名 .Nets://locslhast 
对 方 消息 ， 主 页 你 好 。 读 是 =slled htal， 呼 叫 芒 有 地 儿 思 ? 








图 12.1 简单 的 跨 文档 通信 演示 效果 
主 叫 页 面 index.html 文档 的 源 代码 如 下 所 示 。 
<!IDOCTYPE html> 
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<head> 
<title>postMessage 跨 域 对 话 〈 主 叫 ) </title> 
<meta charset="utf-8"> 
<style type="text/css"> 
#calling { width:46%: float:left: padding:4px 12px: min-height:304px: border:solid 1px red:} 
#called { width:46%: float:right: padding:4px 12px: border:solid 1px red:} 
.highlight { background-color:#FFFF00:} 
#frame {width:100%: overflow:visible; min-height:300px: bordernone:} 
</style> 
</head> 
<body> 
<div id="calling"> 
<h1> 主 叫 页 (index.html) </hl> 
<p> 对 方 域名 : <span id="domain" class="highlight"></span></p> 
<p> 对 方 消息 : <span id="info" class="highlight"></span></p> 


</div> 
<div id="called"> 
<iframe id="iframe" src="http://localhost/called.html"></iframe> 
</div> 
<script type="text/javascript"> 
var EventUtil = { // 定 义 事件 处 理 基本 模块 
addHandler: function (element, type. handler) { // 注 册 事件 
if (element.addEventListener) { /兼容 DOM 模型 
clement.addEventListener(type, handler, false): 
} else if (element.attachEvent) { /兼容 正 模型 
element.attachEvent("on" + type. handler); 
}else { // 兼 容 传统 模型 
element["on" + type] = handler: 
} 
} 
} 


// 窗 口 事件 监听 :监听 message 
EventUtil.addHandler(window. "message". function (event) { 
document.getElementById("domain").innerHTML = event.origin: 
document.getElementById("info").innerHTML = event.data: 。“ // event.data: 发 消息 的 内 容 
D; 
var 过 ame = document.getElementById("iframe"): /获取 嵌入 的 过 ame 
// 当 内 婴 窗 口 加 载 完 毕 时 ， 发 送 消 息 
EventUtil.addHandler(iframe. "load", function (event) { 
var iframe Window = window.frames[0]: 
Var origin = iframe.getAttribute("sre"): 
这 ameWindowpostMessage("called.html 页 有 人 吗 ， 我 是 主页 index html".origin): 
D; 
</script> 
</body> 
</html> 


被 叫 页 面 called.html 文档 的 源 代码 如 下 所 示 。 
<!DOCTYPE html> 
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了 
Ne 


<html> 

<head> 

<title>postMessage 跨 域 对 话 〈 被 叫 ) <jtitle> 

<meta charset="utf-8"> 

<style type="text/css"> 

.highlight { backeround-color:-#FFFFO00:} 

</style> 

</head> 

<body> 

<div id="call"> 
<hl> 被 叫 页 〈calledhtml) </hl> 
<p> 对 方 域名 : <span id="domain" class="highlight"></span></p> 
<p> 对 方 消息 : <span id="info" class="highlight"></span></p> 





</div> 
<script type="text/javascript"> 
var EventUtil = { // 定 义 事件 处 理 基本 模块 
addHandler function (element, type. handler) { /注册 事件 
if (element.addEventListener) { /兼容 DOM 模型 
element.addEventListener(type. handler, false): 
} else if (element.attachEvent) { 1/ 兼容 正 模型 
element.attachEvent("on" + type, handler); 
} else { /兼容 传统 模型 | 
element["on" + type] = handler: ! 
} | 
) 
| 


}; 

// 窗 口 事件 监听 监听 message 

EventUtil.addHandler(window. "message", function (event) { | 
document.getElementById("domain").innerHTML = event.origin: 
document.getElementById("info").innerHTML = event.data; 。“ // event.data: 发 消息 的 内 容 
// 收 到 消息 后 ， 回 话 
// 通 过 访问 message 事件 对 象 的 source 属性 ， 获 取消 息 发 送 源 的 窗口 对 象 
/也 就 是 能 知道 是 谁 发 的 消息 ， 然 后 调用 postMessage0 方 法 ， 给 发 消息 者 回 个 话 
event.source.postMessage(" 主 页 你 好 ， 我 是 calledhtml， 呼 叫 我 有 事 儿 吗 ? "eventorigin): 





上 面 演 示 效 果 显 示 index.html 和 called.html 同 源 呼叫 ， 下 面 我 们 把 index.html 置 于 另 一 个 域 中 ， 
然后 使 用 index.html 向 called.htm 进行 跨 域 呼叫 ， 演 示 效 果 如 图 12.2 所 示 。 


<《 提 注意 ; 为 了 安全 访问 ， 在 跨 域 传递 消息 过 程 中 ， 应 该 在 message 事件 中 检测 对 方 的 域名 ， 吉 免 非 
法 用 户 误 入 ， 带 来 安全 隐患 。 添 加 的 条 件 检测 代码 如 下 : 
EventUtil.addHandler(window. "message". function (event) { 
// event.origin: 发 送 消息 的 地 址 ， 谁 发 的 消息 就 是 谁 的 
// 接 收 时 ， 可 以 加 个 判断 ， 避 免 接收 来 源 不 明 的 URL 发 过 来 的 数据 
这 event.origin != "http://localhost" ){ 
Tetum: 


“2 


AR 





document.getElementById("domain").innerHTML = event.origin: 
document.getElementById("info").innerHTML = event.data; // event.data: 发 消息 的 内 容 








主 叫 页 (index. html ) 被 叫 页 (called. html ) 


对 方 域名 ，NEYD5Atacalpoit 天 方 拓 3，MEDSJIlacalhastia08 
对 方 消息 ， 主 页 条 和， 锦 是 callsd It 本 L， 蛙 0 有 事 儿 局 开 方 清 息 本 led 可 页 有 人 风 ， 扶 是 主页 indsxbtal 








示例 效果 图 12.2 简单 的 跨 域 通信 演示 效果 
12.1.3 案例: 设计 跨 域 动态 对 话 


本 节 示 例 在 12.1.2 节 示例 基础 上 , 进一步 改进 跨 域 通信 的 互动 功能 .示例 包含 两 个 页 面 :index.html 
和 called.html， 其 中 index.html 为 主 叫 页 面 ，called.html 为 被 叫 页 面 。 首 先 ， 主 叫 页 面 可 以 通过 底部 
的 文本 框 向 被 叫 页 面 发 出 实时 消息 , 被 叫 页 面 能 够 在 底部 文本 框 中 进行 动态 回应 ， 整 个 示例 演示 效果 
如 图 12.3 所 示 。 





主 叫 页 (index.html) 被 叫 页 (ealled.html) 





(a) 默认 效果 





| 

| 

| 主 叫 页 (index.html) 被 叫 页 (called.html) 
| i _ 

| epocat0 风 友 民有 A 网 eqn 
来 日本 曾 的 网 友 党 同伴 事 儿 2 A 


er tg 于 op ese SNe 在 滴 ,同人 儿 9 


机 信 
来 日 本 而 的 同 友 说 ， 末代 放 解 一 下 poesiassag< 的 任 衣 。 st 
es, Te 











示例 效果 (b) 对 话 效果 
12.3 ” 跨 域 动态 对 话 演示 效果 
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主 叫 页 面 index.html 文档 的 源 代码 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>postMessage 跨 域 对 话 〈 主 叫 ) </title> 
<meta charset="utf-8"> 
<style type="text/css"> 
#calling { width: 46%:; border: solid 1px red: float: left: padding: 4px 12px: min-height: 304px; } 
#called { width: 46%; float: right: height: 100%; margin-top: -8px:; } 
.highlight { background-color: #EfFFF00; } 
.Ted { color red: } 
#iframe { width: 100%; overflow: visible; min-height: 600px: border: none: } 
#caller { float: left; clear: left: } 
#call_content { width: 300px: height: 80px; margin: 6px; } 
#send { padding: 6px: display: block: margin-left: 6px: width: 300px:; } 
</style> 
</head> 
<body> 
<div id="calling"> 
<hl> 主 叫 页 (index.html) </hl> 
<div id="info"></div> 
</div> 
<div id="called"> 
<iframe id="iframe" src="http://localhost/called.html"></iframe> 
</div> 
<div id="caller"> 
<textarea id="call content"></textarea> 
<button id="send" > 发 送 </button> 











</div> 
<script type="text/javascript"> 
var EventUtil = { // 定 义 事件 处 理 基本 模块 
addHandler function (element, type, handler) { /注册 事件 
if (element.addEventListener) { // 兼 容 DOM 模型 
element.addEventListener(type. handler, false): 
} else if (element.attachEvent) { // 兼 容 正 模型 
element.attachEvent("on" + type. handler): 
}else{ // 莱 容 传统 模型 
element["on" + type] = handler: 
} 
} 
}: 


var info = document.getElementById("info"): 
Var iframe = document.getElementById("iframe"); 
Var send = document.getElementById("send"): 
// 窗 口 事 件 监听 : 监听 message 
EventUtil.addHandler(window. "message". function (event) { 
/监测 消息 来 源 ， 非 法 来 源 屏蔽 
这 event.origin != "http://localhost" ){ 
Tetum:; 


} 
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infoinnerHTML += '“<p> 来 自 <span class="red">'+ event.origin + '</span> 的 网 友 说 : <span 
class="highlight">' + event.data + '</span></p>": 
六 
EventUtiladdHandler(send. "click". function (event) { 
var iframe Window = window.frames[0]: 
Var origin = iframe.getAttribute("sre"); 
Var call content = document.getElementById("call content"): 
这 call_content value length <=0) return; // 如 果 文本 框 为 空 ， 则 禁止 呼叫 
iframe Window.postMessage(call_content.value, origin); /发 出 呼叫 
info.innerHTML += '<p> 来 自 <span class="red"> 本 页 </span> 的 网 友 说 : <span class="highlight">' + 
call_content.value + '</span></p>"; 
| call_content.value = "": /清空 文本 框 





D); 
</script> 
body> 
</html> 


被 叫 页 面 called.html 文档 的 源 代码 如 下 所 示 。 


| 
| 
| 
| 
| 
| 
| 
| <!DOCTYPE html> 
| <html> 
| <head> 
| <title>postMessage 跨 域 对 话 〈 被 叫 ) </title> 
| <meta charset="utf-8"> 
| <style type="text/css"> 
| .highlight { background-color: #FFFF00: } 
| Ted { color red: } 
| #call { width: 100%; border: solid 1px red: min-height: 312px: } 
| #call div { padding: 4px 12px; } 
| #caller { float: left: clear: left: } 
| #call content { width: 300px: height: 80px: margin: 6px: } 
| #send { padding: 6px: display: block: margin-left: 6px: width: 300px: } 
| </style> 
| </head> 
| <body> 
| <div id="call"> 
| <div> 
| <hl> 被 叫 页 (called html》</h1> 
| <div id="info"></div> 
| </div> 
| </div> 
| <div id="caller"> 
| <textarea id="call content"></textarea> 
| <button id="send" > 发 送 </button> 
| 
| 
| 
| 
| 
| 


</div> 
<script type="text/javascript"> 
var EventUtil = { // 定 义 事件 处 理 基 本 模块 
addHandler function (element type. handler) { /注册 事件 
if (element.addEventListener) { /兼容 DOM 模型 
element.addEventListener(type. handler. false): 
} else if (element.attachEvent) { 1/ 兼容 正 模型 
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element.attachEvent("on" + type. handler): 
} else { /兼容 传统 模型 | 
element["on" + type] = handler: | 
| 





} 
下 | 芯 
ee Xote 
Var info = document.getElementById("info"): Note 


Var send = document.getElementById("send"); | 
EventUtil.addHandler(window, "message", function (event) { | 
origin = event.origin: | 

source © = event.source; | 

info .innerHTML += '<p> 来 自 <span class="red">'+ origin +'</span> 的 网 友 说 : <span class="highlight">' + | 
event.data + '</Span></p>' 


六: 

EventUtil.addHandler(send, "click". function (evenb { 
Var call content = document.getElementById("call content"): 
这 call content.value.length <=0) return: 
source.postMessage(call_content.value.origin): 
info.innerHTML += '<p> 来 自 <span class="red"> 本 页 </span> 的 网 友 说 : <span class="highlight">' + | 

call content.value + '</span></p>"; 

call_content.value =""; 

D); 

</script> 

</body> 

</html> 


12.1.4 案例 : 设计 通道 通信 


通道 通信 机 制 提供 了 一 种 在 多 个 源 之 间 进 行 通信 的 方法 ,这 些 源 之 间 通 过 端口 (port) 进行 通信 ， | 
从 一 个 端口 中 发 出 的 数据 将 被 另 一 个 端口 接收 。 
目前 ， 正 10+、Chrome 浏览 器 支持 通道 通信 机 制 。 


写 提示 : 在 HTML5 中 ， 如 果 两 个 页 面 的 URL 地 址 位 于 不 同 的 域 中 ， 或 使 用 不 同 的 端口 号 ， 则 这 | 
两 个 页 面 属于 不 同 的 源 。 

使 用 通道 通信 之 前 ， 首 先 要 创建 一 个 MessageChannel 对 象 ， 用 法 如 下 。 

Var me=new MessageChannel(): 

在 创建 MessageChannel 对 象 的 同时 ， 两 个 端口 将 被 同时 创建 ， 其 中 一 个 端口 被 本 页 面 使 用 ， 而 | 
另 一 个 端口 将 通过 父 页 面 被 发 送 到 内 嵌 的 过 ame 元 素 的 子 页 面 中 。 

在 HTML5 通道 通信 中 ， 使 用 的 每 个 端口 都 是 一 个 MessagePort 对 象 ， 该 对 象 包含 3 个 方法 。 

postMessage(): 用 于 向 通道 发 送 消息 。 

start0): 用 于 激活 端口 ， 开 始 监听 端口 是 否 接收 到 消息 。 

close0: 用 于 关闭 并 停 用 端口 。 

同时 每 个 MessagePort 对 象 都 有 一 个 message 事件 ， 当 端口 接收 到 消息 时 触发 该 事件 。 与 
postMessage 的 message 事件 对 象 相似 ，MessagePort 的 message 事件 对 象 包含 下 面 几 个 属性 : 
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到 Pfrsstesss 从 入 门 到 精通 ( 微 课 精 编 版 ) 
SS 
| 加 data: 包含 任意 字符 串 数据 ， 由 原始 脚本 发 送 。 
| origin: 一 个 字符 串 ， 包 含 原始 文档 的 方案 、 域 名 以 及 端口 ， 如 : http://domain.example:80。 
| source: 原始 文件 的 窗口 的 引用 ， 它 是 一 个 WindowProxy 对 象 (window 代理 ) 。 
全 站 | ports: 一 个 数组 ， 包 含 任何 MessagePort 对 象 发 送 消息 。 
| 【示例 】 下 面 示例 演示 了 如 何在 Web 应 用 中 实现 通道 通信 。 为 了 便于 理解 和 练习 ， 本 例 使 用 3 
0 个 文件 夹 模拟 三 个 站 点 : 
| 回 http://localhost/site 1 
| 回 http://localhost/site 2 
回 http://localhost/site 3 


4 人 注意 : 域名 为 本 地 一 虚拟 服务 器 ， 如 果 用 户 定义 了 虚拟 目录 ， 则 需要 在 示例 脚本 中 修改 对 应 的 
域名 。 


本 示例 把 测试 主页 放 在 http://localhost/site_1 模拟 站 点 (文件 夹 ) 中 。 在 主页 index.html 中 放置 两 
个 iame 元 素 ， 这 两 个 过 ame 元 素 中 放置 两 个 子 页 ， 分 别 来 自 于 http://localhost/site 2 模拟 站 点 和 
http://localhost/site_3 模拟 站 点 。 
在 浏览 器 中 预览 主页 ， 当 子 页 1 被 加 载 完 毕 后 ， 向 子 页 2 发 送 消息 ， 消 息 为 “site_2/index.html 
| 初始 化 完毕 。”， 当 子 页 2 接收 到 该 消息 后 ， 向 子 页 1 返回 消息 ， 当 子 页 1 接收 到 来 自 子 页 2 的 返回 消 
息 后 ， 将 该 消息 在 浏 ， 览 器 窗口 中 弹出 显示 ， 演 示 效 果 如 图 12.4 所 示 。 
四 - 








index poge 


© | @ localhost/ste_1/index html 六 | ; 
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ie_21irderhemigie 人 二 中、 二 Fo 可 





C3 





12.4 通道 通信 演示 效果 


【操作 步骤 】 

第 1 步 ， 在 本 地 构建 一 个 虚拟 站 点 ， 域 名 为 http://localhost。 

第 2 步 ， 在 站 点 内 新 建 3 个 文件 夹 ， 分 别 命名 为 site 1、site 2、site 3。 

第 3 步 ， 设 计 示 例 主页 。 在 site_1 目录 下 ， 新 建 网 页 保存 为 ndex.html。 

第 4 步 ， 在 site_1/index.html 页 面 中 嵌入 两 个 过 ame 元 素 。 设 置 src 分 别 为 http://localhost/site_2/ 
index.html 和 http://localhost/site_3/index.html。 同 时 ， 使 用 CSS 隐藏 显示 style="display:none"。 

<iframe style="display:none" src="http://localhost/site 2/index.html"></iftame> 

<iframe style="display:none" src="http://localhost/site_ 3/index.html"></iframe> 
| 第 5 步 ， 在 首页 脚本 中 ， 当 页 面 加 载 完毕 之 后 ， 注 册 一 个 message 事件 ， 监 听 管 道 消 息 。 当 接收 
| 到 第 一 个 过 ame 元 素 中 的 页 面 消息 之 后 ， 把 它 转发 给 第 二 个 这 ame 元 素 中 的 页 面 。 


frames: 
// 对 第 一 个 这 ame 元 素 中 的 页 面 进行 监听 
“2 
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window.addEventListener(message',function(event){ | 
i event.ports length > 0){ 
// 将 端口 转发 给 第 二 个 fame 元 素 中 的 页 面 
ifames[1].postMessage(event.data.'http://localhost/site_ 3/index.html'.event.ports): 


} 
}.false); 
可 
第 6 步 ,在 site 2 目录 下 ,新 建 网 页 保存 为 index.html。 在 该 页 面 脚本 中 ,创建 一 个 MessageChannel | 
对 象 。 | 
Var mc = new MessageChannel(): | 


第 7 步 ， 创 建 MessageChannel 对 象 后 ， 两 个 MessagePort 对 象 也 被 同时 创建 ， 可 以 通过 | 
MessageChannel 对 象 的 port 1 属性 值 与 port2 属性 值 来 访问 这 两 个 MessagePort 对 象 。 

这 里 将 MessageChannel 对 象 的 portl 属性 值 所 引用 的 MessagePort 对 象 留 在 本 页 面 ， 将 
MessageChannel 对 象 的 port2 属性 值 所 引用 的 MessagePort 对 象 以 及 需要 发 送 的 消息 通过 父 页 面 的 
postMessage() 方 法 发 送 给 父 页 面 。 

window.onload = functionO{ 
var mec = new MessageChannel(): | 
/向 父 页 面 发 送 端口 及 消息 
window.parent.postMessage('site_2/index.html 初始 化 完毕 。",http://localhost/site_l/index.html', [me.port2]); 
/定义 本 页 面 端口 接收 到 消息 时 的 事件 处 理 函 数 
me.portl.addEventListener('message'. function(event){ 
alert( event.data ): 
}, false); 
/打开 本 页 面 中 的 端口 ， 开 始 监听 
Imc.portl.start(O); 

















由 
在 父 页 面 中 定义 接收 到 MessagePort 对 象 及 消息 后 ， 转 发 给 其 第 二 个 iframe 元 素 中 的 子 页 面 ， 代 | 
码 可 以 参考 第 5 步 说 明 。 同 时 ， 定 义 MessagePort 对 象 在 接收 到 消息 时 所 执行 的 事件 处 理 函数 。 
第 8 步 ， 在 site 3 目录 下 ， 新 建 网 页 保存 为 ndex.html。 在 该 页 面 脚本 中 ， 定 义 当 页 面 接收 到 消 | 
息 及 端口 时 , 访问 触发 窗口 对 象 的 message 事件 的 事件 对 象 的 ports 属性 值 中 的 第 一 个 端口 , 即 子 页 1 | 
发 送 过 来 的 端口 ， 然 后 将 反馈 消息 发 回 给 该 端口 。 
window.onload = fnctionO{ 
// 定 义 接收 到 消息 时 的 事件 处 理 函 数 
window.addEventListener('message'.function(event){ 
event.ports[0].postMessage('site_3/index.html 收 到 消息 : '+ event.data + ' 本 页 也 已 加 载 完毕 。 小 
}-false): 








} 


12.2 WebSockets 通信 


HTMLS5 的 Web Sockets API 能 够 在 Web 应 用 程序 中 实现 客户 端 与 服务 器 端 之 间 进 行 非 HTTP 的 
通信 。 它 实现 了 使 用 HITP 不 容易 实现 的 服务 器 端的 数据 推送 等 智能 通信 技术 , 因此 受到 了 高 度 关注 。 
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窑 提示: 本 节 示例 以 Windows 操作 系统 +Apache 服务 器 + PHP 开发 语言 组 合 框架 为 基础 进行 演示 
说 明 。 如 果 读者 的 本 地 系统 没有 搭建 PHP 虚拟 服务 器 ， 建 议 先 搭建 该 虚拟 环境 之 后 ， 再 
详细 学 习 本 节 内 容 。 

a 
| 12.2.1 WebSocket 基础 
| WebSocket 是 一 个 持久 化 的 协议 ， 这 是 相对 于 HTTP 非 持 久 化 来 说 的 。 
| 例如 ，HTTP 1.0 的 生命 周期 是 以 request (请 求 ) 作为 界定 的 ， 也 就 是 一 个 request、 一 个 response 
| 《响应 )。 对 于 HTTP 协议 来 说 ， 本 次 client (客户 端 ) 与 server〔 服 务 器 端的 会 话 到 此 结束 ; 而 在 
| HTTP 1.1 中 稍微 有 所 改进 ， 即 添加 了 keep-alive， 也 就 是 在 一 个 HTTP 连接 中 可 以 进行 多 个 request 
| 请求 和 多 个 response 响应 操作 。 

| 然而 在 实时 通信 中 ，HTTP 并 没有 多 大 的 作用 ，HTTP 只 能 由 client 发 起 请 求 ，server 才能 返回 信 

| 息 ， 即 server 不 能 主动 向 client 推送 信息 ， 无 法 满足 实时 通信 的 要 求 。 而 WebSocket 可 以 进行 持久 化 

| 连接 ， 即 client 只 需要 进行 一 次 握手 (类 似 request)， 成 功 后 即 可 持续 进行 数据 通信 ， 值 得 关注 的 是 

| WebSocket 能 够 实现 client 与 server 之 间 全 双 工 通信 (双向 同时 通信 )， 即 通信 的 双方 可 以 同时 发 送 和 

接收 信息 的 信息 交互 方式 。 
图 12.5 演示 了 client 和 server 之 间 建 立 WebSocket 连接 时 的 握手 部 分 ， 这 部 分 在 Nodejs 中 

| 可 以 十 分 轻松 地 完成 ， 因 为 Nodejs 提供 的 net 模块 已 经 对 socket 套 接 字 做 了 封装 处 理 ， 开 发 者 使 

| 用 的 时 候 只 需要 考虑 数据 的 交互 ， 而 不 用 处 理 连接 的 建立 。 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 1. 发 送 Sec-WebSocket-K 
| 
| 
| 
| 
| 
| 
| 
| 
| 


elicnt 2. 加 密 返 回 SE 
(客户 端 ) (服务 器 端 ) 


3. 本 地 校 验 


图 12.5 WebSocket 连接 时 握手 示意 图 
client 与 server 建立 socket 时 ， 握 手 的 会 话 内 容 也 就 是 request 与 response 的 过 程 。 


| 容 提示 :socket 又 称 为 套 接 字 ， 是 基于 W3C 标准 开发 在 一 个 TCP 接口 中 进行 双向 通信 的 技术 。 通 
常情 况 下 ，socket 用 于 描述 他 地 址 和 端口 ， 是 通信 过 程 中 的 一 个 字符 句柄 。 当 服务 器 端 
有 多 个 应 用 服务 绑 定 一 个 socket 时 ， 通 过 通信 中 的 字符 句柄 ， 实 现 不 同 端口 对 应 不 同 应 

| 用 服务 功能 。 目 前， 大 部 分 浏览 器 都 支持 HIML5 的 Web Sockets API. 

| 具体 步骤 : 

| 第 1 步 ，client 建立 WebSocket 时 ， 向 服务 器 端 发 出 请 求 信息 : 

GET /chat HITP/1.1 

Host: server.example.com 

// 告 诉 服 务 器 现在 发 送 的 是 WebSocket 协议 

Upgrade: websocket 


Connection: Upgrade 
/下 面 是 一 个 Base64 encode 的 值 , 这 个 是 浏览 器 随机 生成 的 , 用 于 验证 服务 器 端 返回 数据 是 否 是 WebSocket 
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助理 
Sec-WebSocket-Key: x3JJHMbDL1EzLkKh9GBhXDw— 
Sec-WebSocket-Protocol: chat, superchat 
Sec-WebSocket-Version: 13 
Origin: php.cn 





第 2 步 ， 服 务 器 获取 到 client 请 求 的 信息 后 ， 根 据 WebSocket 协议 对 数据 进行 处 理 并 返回 ， 其 中 | 











要 对 Sec-WebSocket-Key 进行 加 密 等 操作 。 
HITP/1.1 101 Switching Protocols 








// 依 然 是 固定 的 WebSocket 协 议 ,告诉 客户 端 即 将 升级 的 是 WebSocket 协 议 ,而 不 是 mozillasocket、lurnarsocket | 


或 者 shitsocket 
Upgrade: websocket 
Connection: Upgrade 


// 下 面 则 是 经 过 服务 器 确认 ， 并 且 加 密 过 后 的 Sec-WebSocket-Key， 也 就 是 client 要 求 建立 WebSocket 验证 | 


的 凭证 
Sec-WebSocket-Accept: HSmrc0sMIYUKkAGmm5sOPpG2HaGWk= 
Sec-WebSocket-Protocol: chat 


使 用 WebSockets API 可 以 在 服务 器 与 客户 端 之 间 建立 一 个 非 HTTP 的 双向 连接 。 这 个 连接 是 实 | 


时 的 ， 也 是 永久 的 ， 除 非 被 显 式 关 闭 。 这 意味 着 当 服务 器 想 向 客户 端 发 送 数据 时 ， 可 以 立即 将 数据 推 
送 到 客户 端的 浏览 器 中 ， 无 须 重新 建立 连接 。 只 要 客户 端 有 一 个 被 打开 的 socket 〈 套 接 字 )， 并 且 与 


服务 器 建立 连接 ， 服 务 器 就 可 以 把 数据 推送 到 这 个 socket 上 ， 服 务 器 不 再 需要 轮 询 客户 端的 请 求 , 从 | 


被 动 转 为 了 主动 。 

另外 ， 在 WebSockets API 中 。 同 样 可 以 使 用 跨 域 通信 技术 。 在 使 用 跨 域 通 信 技 术 时 ， 应 该 确保 
客户 端 与 服务 器 端 是 互相 信任 的 ， 服 务 器 端 应 该 判断 将 它 的 服务 发 送 给 所 有 客户 端 , 还 是 只 发 送 给 革 
些 受 信任 的 客户 端 。 


12.2.2 使 用 WebSockets API 


WebSocket 连接 服务 器 和 客户 端 ， 这 个 连接 是 一 个 实时 的 长 连接 ， 服 务 器 端 一 旦 与 客户 端 建立 了 
双向 连接 ， 就 可 以 将 数据 推送 到 Socket 中 ， 客 户 端 只 要 有 一 个 Socket 绑 定 的 地 址 和 端口 与 服务 器 建 
立 联 系 ， 就 可 以 接收 推送 来 的 数据 。 

【操作 步骤 】 

第 1 步 ， 创 建 连接 。 新 建 一 个 WebSocket 对 象 ， 代 码 如 下 。 


Var host = "ws://echo.websocket.org/": 
Var socket=new WebSocket(host); 





4 前 注意 ;WebSocket0 构 造 函 数 参 数 为 URL， 必 须 以 “ws” 或 “wss”( 加 密 通 信 时 ) 字符 开头 ， 后 | 


面 字符 囊 可 以 使 用 HTTP 地 址 .该 地 址 没有 使 用 HTTP 协议 写法 ， 因 为 它 的 属性 为 | 


WebSocket URL。URL 必须 由 4 个 部 分 组 成 ， 分 别 是 通信 标记 (ws )、 主 机 名 称 (host )， 
端口 号 (port) 和 WebSocket Server。 


在 实际 应 用 中 ，socket 服务 器 端 脚 本 可 以 是 Python 、Nodejs、Java、PHP 。 本 例 使 用 | 


http://www.websocket.org/ 网 站 提供 的 socket 服务 端 ， 协 议 地 址 为 ws://echo.websocket.org/。 这 样 方便 | 


初学 者 架设 服务 器 测试 环境 ， 以 及 编写 服务 器 脚本 。 
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| 第 2 步 ， 发 送 数据 。 当 WebSocket 对 象 与 服务 器 建立 连接 后 ， 使 用 如 下 代码 发 送 数据 。 
| 

| socket.send(dataInfo): 


全 注意 ; socket 为 新 创建 的 WebSocket 对 象 ，send0 方 法 中 的 dataInfo 参数 为 字符 类 型 ， 只 能 使 用 
SB 文本 数据 或 者 将 JSON 对 象 转换 成 文本 内 容 的 数据 格式 。 














第 3 步 ， 接 收 数据 。 通 过 message 事件 接收 服务 器 传 过 来 的 数据 ， 代 码 如 下 。 
| socket.onmessage=function(event){ 
// 弹 出 收 到 的 信息 
| alert(event.data): 
| /其 他 代码 
| 是 
| 
| 其 中 ,通过 回调 函数 中 event 对 象 的 data 属性 来 获取 服务 器 端 发 送 的 数据 内 容 ， 该 内 容 可 以 是 一 
| 个 字符 串 或 者 JSON 对 象 。 
| 第 4 步 ， 显示 状态 。 通 过 WebSocket 对 象 的 readyState 属性 记录 连接 过 程 中 的 状态 值 。readyState 





属性 是 一 个 连接 的 状态 标志 ， 用 于 获取 WebSocket 对 象 在 连接 、 打 开 、 变 化 中 和 关闭 时 的 状态 。 该 状 
态 标志 共有 4 个 属性 值 ， 简 单 说 明 如 表 12.1 所 示 。 


表 12.1 readyState 属性 值 





属 性 什 说 明 
0 连接 尚未 建立 
1 [opEN | WebSocket 的 连接 已 经 建立 
2 连接 正在 关闭 
3 连接 已 经 关闭 或 不 可 用 


与 客户 端 连 接 的 状态 ， 并 将 连接 状态 以 状态 码 形 式 返 回 给 客户 端 。 
第 5 步 ， 通 过 open 事件 监听 socket 的 打开 ， 用 法 如 下 所 示 。 
webSocket.onopen = function(event){ 
// 开 始 通信 时 处 理 
h 
第 6 步 ， 通 过 close 事件 监听 socket 的 关闭 ， 用 法 如 下 所 示 。 


WebSocketonclose=fonction(evenb{f 
/通信 结束 时 的 处 理 


| 
| 
| 
| 
| 人 息 提示 : WebSocket 对 象 在 连接 过 程 中 ， 通 过 侦 测 readyState 状态 标志 的 变化 ， 可 以 获取 服务 器 端 
| 
| 
| 
| 
| 





| 

| 

| } 
| 

| 第 7 步 ， 调 用 close0 方 法 可 以 关闭 socket， 切 断 通信 连接 ， 用 法 如 下 所 示 。 
WebSocketcloseO: 

本 示例 完整 代码 如 下 : 


<html> 
<head> 
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| 

<script> | 
Var socket /声明 socket | 
function initO{ /初始 化 | 
Var host = "ws://echo.websocket.org/": // 声 明 host， 注 意 是 ws 协议 | 
ty{ | 
socket = new WebSocket(host): 1/ 新建 一 个 socket 对 象 | 


log( 当 前 状态 : “+socketreadyState): /将 连接 的 状态 信息 显示 在 控制 台 
socket.onopen ”= fnnctiontmsg){f log(" 打 开 连 接 : "+ thisreadyState): }:// 监 听 连 接 
socket.onmessage = function(msg){ log(" 接 受 消息 : "+ msg.data): }: 
/监听 当 接 收 信息 时 触发 匿名 函数 
socket.onclose “= fonction(msg){ log(" 断 开 接 连 : "+ this.readyState): }: /关闭 连接 
socket.onerror “= function(msg){ log(" 错 误 信息 : "+ msg.data): }; /监听 错误 信息 
} 
catch(ex){ 
log(ex); 
} 
$("msg").focusO; 





} 
function sendO{ // 发 送信 息 
Var txt,msg; 
txt= $("msg"); 
msg = txt.value; 
这 !msg){ alert(" 文 本 框 不 能 够 为 空 "); return; } 
txt.value=""; 
txtfocus0: 
try{ socketsend(msg): log(' 发 送 消息 : “+msg): } catch(ex){ log(ex): } 
} 
function quitO{ /关闭 socket 
log(" 再 见 "); 
socket.close(); 
socket=null; 


} 

/根据 这 获取 DOM 元 素 

function $(id){ return document.getElementById(id): } 
/将 信息 显示 在 id 为 info 的 div 中 

function log(msg){ $("info").innerHTML+="<br>"+msg: } 
/键盘 事件 〈 回 车 ) 

function onkey(event){ 这 eventkeyCode 一 13){ send0: } } 
</script> 

</head> 

<body onload="initO"> 

<div>HTML5S Websocket</div> 

<div id="info"></div> 

<input id="msg" type="textbox" onkeypress="onkey(event)"/> 
<button onclick="send0"> 发 送 </button> 

<button onclick="quit0"> 断 开 </button> 

</body> 

</html> 


在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.6 所 示 。 
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(a) 建立 连接 (b) 相互 通信 (c) 断 开 连 接 
图 12.6 使 用 WebSocket 进行 通信 


在 WebSockets API 内 部 ， 通 过 使 用 WebSocket 协议 来 实现 多 个 客户 端 与 服务 器 端 之 间 的 双向 通 
信 。 该 协议 定义 客户 端 与 服务 器 端 如 何 通过 握手 来 建立 通信 管道 ， 实 现 数据 〈 包 括 原始 二 进 制 数据 ) 
的 传送 。 

国际 上 标准 的 WebSocket 协议 为 RFC6455 协议 (通过 IETF 批准), 目前 为 止 , Chrome 15+、Firefox 
11+， 以 及 正 10 版 本 的 浏览 器 均 支 持 该 协议 ， 包 括 该 协议 中 定义 的 二 进 制 数据 的 传送 。 


容 提示 : WebSockets API 适 用 于 当 多 个 客户 端 与 同一 个 服务 器 端 需要 实现 实时 通信 的 场景 。 例 如 ， 
在 如 下 所 示 的 Web 网 站 或 Web 应 用 程序 中 。 
多 人 在 线 游戏 网 站 。 
聊天 室 。 
实时 体育 或 新 闻 评论 网 站 。 
实时 交互 用 户 信息 的 社交 网 站 。 


12.2.3 在 PHP 中 建立 socket 


12.2.2 节 介 绍 了 如 何在 前 端 页 面 中 开启 WebSocket 服务 , 下 面 以 PHP 技术 为 基础 , 介绍 如 何在 服 
务 器 端 开 启 WebSocket 服务 。 只 有 这 样 ， 才 能 够 实现 client (客户 端 ) 与 server (服务 器 端 ) 握手 通信 。 

PHP 实现 WebSocket 服务 主要 是 应 用 PHP 的 socket 函数 库 。 PHP 的 socket 函数 库 与 C 的 socket 
函数 非常 类 似 ， 具 体 说 明 可 以 参考 PHP 参考 手册 。 

第 1 步 ， 在 服务 器 中 先 要 对 已 经 连接 的 socket 进行 存储 和 识别 。 每 一 个 socket 代表 一 个 用 户 ， 
如 何 关联 和 查询 用 户 信息 与 socket 的 对 应 就 是 一 个 问题 ， 这 里 主要 应 用 了 文件 描述 符 。 

第 2 步 ，PHP 创建 的 socket 类 似 于 int 值 为 34 之 类 的 资源 类 型 ， 我 们 可 以 使 用 (int) 或 intval0 
函数 把 socket 转换 为 一 个 唯一 的 IJD 值 ， 从 而 可 以 实现 用 一 个 类 索引 数组 来 存储 socket 资源 和 对 应 
的 用 户 信息 : 

$connected sockets = array( 

(int)$socket => array( 
‘Tesource’ => $socket, 
mame' => $name. 
‘ip' => $ip, 
‘port 一 $port. 
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第 3 步 ， 创 建 服务 器 端 socket 的 代码 如 下 : 


// 创 建 一 个 TCP socket: 此 函数 的 可 选 值 在 PHP 参考 手册 中 有 详细 说 明 ， 这 里 不 再 展开 
$this->master = socket create(AF INET SOCK_ STREAM, SOL_TCP): 


/配置 参数 :设置 人 P 和 端口 重用 ， 在 重启 服务 器 后 能 重新 使 用 此 端口 | Y 
socket_set_option($this->master. SOL SOCKET SO REUSEADDR, 1): | 全 

// 绑 定 通道 : 将 卫 和 端口 绑 定 在 服务 器 socket 上 | 
socket_bind($this->master, $host, $port): 





// 监 听 通 道 ，listen 函数 使 主动 连接 套 接口 变 为 被 连接 套 接口 ， 使 得 此 socket 能 被 其 他 socket 访问 ， 从 而 | 
实现 服务 器 功能 。 后 面 的 参数 则 是 自 定义 的 待 处 理 socket 的 最 大 数目 ， 并 发 高 的 情况 下 ， 这 个 值 可 以 设置 大 一 | 
点 ， 虽 然 它 也 受 系 统 环境 的 约束 。 

socket listen($this->master, self:LISTEN _ SOCKET NUMD: 


这 样 就 得 到 一 个 服务 器 socket， 当 有 客户 端 连接 到 此 socket 上 时 ， 它 将 改变 状态 为 可 读 。 
第 4 步 ， 完 成 通道 连接 之 后 ， 下 面 是 服务 器 的 处 理 逻 辑 。 

这 里 着 重 讲解 一 下 socket_ selectO 函 数 的 用 法 : 

int socket select(array &$read, array &$write, array &$except, int $tv_sec[, int $tv_usec =0]) 


socket selectO 函 数 使 用 传统 的 select 模型 , 可 读 、 可 写 、 异 常 的 socket 会 被 分 别 放 入 $read、$write、 | 
$except 数组 中 ， 然 后 返回 状态 改变 的 socket 的 数目 ， 如 果 发 生 了 错误 ， 函 数 将 会 返回 false。 


< 拟 注意 : 最 后 两 个 时 间 参 数 只 有 单位 不 同 ， 可 以 搭配 使 用 ， 用 来 表示 socket_ select 阻塞 的 时 长 .为 
0 时 此 函数 立即 返回 ， 可 以 用 于 轮 询 机 制 ; 为 null 时 ， 函 数 会 一 直 阻 塞 下 去 ， 这 里 可 设置 


$tv_sec 参数 为 null， 让 它 一 直 阻 塞 ， 直 到 有 可 操作 的 socket 返回 。 
下 面 是 服务 器 的 主要 逻辑 : 
$write = $except = NULL: 
$sockets = array_column($this->sockets, 'resource'); // 获 取 到 全 部 的 socket 资源 
S$read_num = socket_select($sockets, $write, $except, NULL); 
foreach ($sockets as $socket) { 
// 如 果 可 读 的 是 服务 器 socket， 则 处 理 连接 逻辑 
if ($socket 一 $this->master) { 
Socket_accept($this->masteD): 
// socket acceptO 接 收 请 求 的 连接 ， 即 一 个 客户 端 socket， 错 误 时 返回 false 
self::connect($client): 
continue; 
// 如 果 可 读 的 是 其 他 已 连接 socket， 则 读 取 其 数据 ， 并 处 理应 答 逻 辑 
}else{ 
/函数 socket recvO 从 socket 中 接收 长 度 为 len 字 节 的 数据 ， 并 保存 在 $buffer 中 
Sbytes = @socket Iecv($socket $buffer, 2048. 0): 
if ($bytes <9) { | 
// 当 客户 端 忽然 中 断 时 ， 服 务 器 会 接收 到 一 个 8 字 节 长 度 的 消息 (由 于 其 数据 帧 机 制 ，8 字 节 | 
的 消息 表示 它 是 客户 端 异常 中 断 消息 ) 
// 服 务 器 处 理 下 线 逻 辑 ， 并 将 其 封装 为 消息 广播 出 去 
Srecv_msg = $this->disconnect($socke): 
}else { 
// 如 果 此 客户 端 还 未 握手 ， 执 行 握手 逻辑 
if(!$this->sockets[(int)$socket]['handshake"]) { 
self::handShake($socket. $buffer): 
continue: 
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| 
| } else { 
| Srecv_msg = self::parse($buffer): 
| 六 
| 
| } 
食 凡 | /广播 消息 
hii Sthis->broadcast($mse); 


tc | 时 


上 面 代码 只 是 服务 器 处 理 消息 的 基础 代码 , 日 志 记 录 和 异常 处 理 都 略 过 了 ， 而 且 还 有 些 数据 帧 解 
| 析 和 封装 的 方法 ， 在 此 不 再 展开 。 


12.2.4 WebSockets API 开发 框架 


WebSockets API 的 使 用 为 Web 应 用 程序 的 搭建 提供 了 一 种 新 的 架构 。 自 HTMLS5 开始 ， 在 一 个 
Web 应 用 程序 中 ， 当 服务 器 端 不 会 同时 处 理 过 多 来 自 客户 端的 请 求 时 ， 仍 然 可 以 使 用 传统 的 Web 应 
用 程序 架构 。 例 如 ，LAMP (Linux 操作 系统 +Apache 服务 器 + MySQL 数据 库 +PHP 或 Perl 或 Python ) 

当 服 务 器 端 需要 同时 处 理 大 量 来 自 客户 端的 请 求 , 并 且 需 要 确保 服务 器 端 只 需 花费 较 少 的 性 能 成 
本 来 处 理 这 些 请 求 时 ， 可 以 使 用 这 种 新 型 的 使 用 WebSockets API 的 应 用 程序 架构 ， 因 为 这 种 应 用 程 
序 架构 通常 使 用 “ 非 阻塞 型 IO ”技术 。 

目前 为 止 ， 能 够 实现 这 种 新 型 的 使 用 WebSockets API 的 应 用 程序 架构 的 开发 框架 包括 : 

使 用 Nodejjs 开发 语言 

> Socket.IO 
> WebSocket-Node 
> ws 

使 用 Java 开发 语言 

> Jetty 

回 ”使 用 Ruby 开发 语言 

> EventMachine 

回 ”使 用 Python 开发 语言 

> Pywebsocket 
> Tormado 

使 用 Erlang 开发 语言 

> Shirasu 

使 用 C++ 开发 语言 

> .Libwebsockets 

使 用 .NET 开发 语言 

> Superwebsocket 


| 12.2.5 案例 : 设计 简单 的 “ 呼 -应 ”通信 


本 节 通 过 一 个 简单 的 示例 演示 如 何 使 用 WebSockets 让 客户 端 与 服务 器 端 握手 连接 ， 然 后 进行 简 
| 单 的 呼叫 和 应 答 通信 。 
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【操作 步骤 】 
第 1 步 ， 新 建 客户 端 页 面 ， 保 存 为 clienthtml。 | 
第 2 步 ， 在 页 面 中 设计 一 个 简单 的 交互 表单 。 其 中 <textarea id="data"> 用 于 接收 用 户 输入 ， 单 击 | 
<button id="send"> 按 钮 ， 可 以 把 用 户 输 入 的 信息 传递 给 服务 器 ， 服务器 接收 到 信息 之 后 ， 响 应 信息 并 | 
显示 在 <div id="message"> 容 器 中 。 | 
<div id="action"> 
<textarea id="data"></textarea> 
<button id="send"> 发 送信 息 </button> | 
</div> | 
<div id= "message"> </div> 


第 3 步 ， 设 计 JavaScript 脚本 ， 建 立 与 服务 器 端的 连接 ， 并 通过 open、message、error 事件 处 理 | 
<script> 
Var message = document.getElementById(message’): 
Var socket = new WebSocket('ws://127.0.0.1:8008"): 
socket.onopen = function(event) { 
message.innerHTML = '<p> 连 接 成 功 ! </p>'; 
} 
socket.onmessage = function(event) { 
message.innerHTML = "<p> 响 应 信息 : "+ event.data +"</p>"; 
} 
socket.onerror = function() { 
message.innerHTML = '<p> 连 接 失 败 ! </p>'; 
} 
</script> | 
第 4 步 ， 获 取 用 户 输入 的 信息 ， 并 把 它 发 送 给 服务 器 。 | 
| 


Var send = document.getElementById(send): | 
send.addEventListener('click', function0 { /设计 单 击 按钮 提交 信息 | 
Var content = document.getElementByIdCdata').value: | 








iftcontent length <= 0){ // 验 证 信息 | 
alert( 消 息 不 能 为 空 ! 小 | 
return 人 false: | 

} | 
socket.send(content): // 发 送信 息 | 
| 


D: 

第 5 步 ， 服 务 器 端 应 用 程序 开发 。 新 建 PHP 文件 ， 保 存 为 serverphp， 与 client.html 同 置 于 PHP | 
站 点 根 目录 下 。 

第 6 步 ， 为 了 方便 操作 ， 定 义 WebSocket 类 ， 结 构 代 码 如 下 。 


<?php 

/定义 WebSocket 类 

class WebSocket { 
private $socket://socket 的 连接 池 ， 即 client 连接 进来 的 socket 标志 
Private $accept:// 不 同 状态 的 socket 管理 
private $isHand = array0:// 判断 是 否 握 手 
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/在 构造 函数 中 创建 socket 连接 

public function construct($host, Sport $max) { } 
/对 创建 的 socket 循环 进行 监听 ， 处 理 数据 
public function startO {} 

// 首 次 与 客户 端 握 手 

public function dohandshake($sock. $data, Skey) { } 
// 关 闭 一 个 客户 端 连 接 

public function close($sock) { } 

// 解 码 过 程 

public function decode($buffer) { } 

// 编 码 过 程 

public function encode($buffer) { } 





第 7 步 ， 在 构造 函数 中 创建 socket 连接 。 


public function construct($host, $port, $max) { 
// 创 建 服务 端的 socket 套 接 流 ，net 协议 为 IPv4，protocol 协议 为 TCP 
S$this->socket = Socket create(AF INET SOCK_STREAM., SOL _TCP); 
socket_set_option($this->socket, SOL_ SOCKET SO_REUSEADDR., TRUE): 
// 绑 定 接收 的 套 接 流 主机 和 端口 ， 与 客户 端 相对 应 
socket_bind($this->socket, $host. $port): 
// 监 听 套 接 流 
socket listen($this->socket, $max); 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 第 8 步 ， 监 听 并 接收 数据 。 

| public function startO { 

| while(true) {// 死 循环 ， 让 服务 器 无 限 获取 客户 端 传 过 来 的 信息 

| Scycle = $this->accept; 

| S$cycle[] = $this->socket: 

| socket_select($cycle, $write, Sexcept nulD): /这 个 函数 同时 接收 多 个 连接 

| foreach($cycle as $sock) { 

| if($sock 一 = $this->socket) {// 如 果 有 新 的 client 连接 进来 

| Sclient = socket_accept($this->socket); /接收 客户 端 传 过 来 的 信息 
| S$this->accept[] = Sclient: // 将 新 连接 进来 的 socket 存 进 连接 池 

| S$key 二 array_keys($this->accept); /返回 包含 数组 中 所 有 键 名 的 新 数组 
| S$key=end(Skey): /输出 数组 中 最 后 一 个 元 素 的 值 

| $this->isHand[Skey] = false: /标志 该 socket 资源 没有 完成 握手 

| }else{ 

| // 读 取 该 socket 的 信息 ， 

| /注意 : 第 二 个 参数 是 引用 传 参 ， 即 接收 数据 

| /第 三 个 参数 是 接收 数据 的 长 度 

| Slength = socket recv($sock, $buffer, 204800. 0): 

| /根据 socket 在 accept 池 里 面 查找 相应 的 键 ID 

| S$key =array search($sock. $this->accept): 

| // 如 果 接 收 的 信息 长 度 小 于 7， 则 该 client 的 socket 为 断 开 连 接 
| 这 $length<7) { 

| S$this->close($sock); /给 该 client 的 socket 进行 断 开 操作 

| continue: 
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} 
这 !$Sthis->isHand[Skey]) {// 判 断 该 socket 是 否 已 经 握手 | 
// 如 果 没 有 握手 ， 则 进行 握手 处 理 | 
Sthis->dohandshake(Ssock $buffer. Skey): | 


} else {// 向 该 client 发 送信 息 ， 对 接收 到 的 信息 进行 uncode 处 理 | 全 
// 先 解码 ， 再 编码 | a 
$data = $this->decode($buffenD): | Note 
$data = $this->encode($data); Note 





// 判 断 断 开 连 接 ( 断 开 连 接 时 数据 长 度 小 于 10》 | 
/如 果 不 为 空 ， 则 进行 消息 推送 操作 | 
ifsttlen(Sdata) > 0) { 
foreach($this->accept as $client) { 
/向 socket accept 套 接 流 写 入 信息 ， 也 就 是 反馈 信息 给 socket_ bind(0 所 绑 定 
的 主机 客户 端 ，socket_ write 的 作用 是 向 socket_create 的 套 接 流 写 入 信息 ， 或 者 向 socket_accept 的 套 接 流 写 入 信 
息 


Socket_ write($client, $data, strlen($data)); 


} 
} 
} 
} 
} 
} 
第 9 步 ， 定 义 dohandshake0 〇 函数 ， 建 立 与 客户 端的 第 一 次 握手 连接 。 

// 首 次 与 客户 端 握手 


public function dohandshake($sock. $data, $key) { 
/截取 Sec-WebSocket-Key 的 值 并 加 密 ， 其 中 $key 后 面 的 一 部 分 258EAFA5-E914-47DA-95CA- 
C5AB0DC85B11 字符 串 应 该 是 固定 的 
if (preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $data, $match)) { | 
Sresponse = base64 encode(shal($match[1] . '258EAFA5-E914-47DA-95CA-C5ABODC85B11， | 


~ 


true)): 
Supgrade ="HTTP/1.1 101 Switching Protocol\i\n" . 
"Upgrade: websocket\r\n" . 
"Connection: Upgradewnn" . 
"Sec-WebSocket-Accept: " . $response . "mm 
socket_write($sock, $uperade. strlen($upgrade)): 
S$this->isHand[$key] = true: 


} 
} 
关于 解码 和 编码 函数 ， 这 里 不 再 详细 说 明 ， 读 者 可 以 参考 本 节 示 例 源 代码 。 
第 10 步 ， 实 例 化 WebSocket 类 型 ， 并 调用 start() 方 法 开通 WebSocket 服务 。 
/127.0.0.1 是 在 本 地 主机 测试 ， 如 果 有 多 台 计 算 机 ， 可 以 写 瑟 地 址 
$webSocket= new WebSocket(127.0.0.1. 8008. 10000): 
$webSocket->start0: 
第 11 步 ， 在 浏览 器 中 先 运行 serverphp， 启 动 WebSocket 服务 器 ， 此 时 页 面 没 有 任何 信息 ， 浏 览 | 
器 一 致 等 待 客户 端 页 面 的 连接 请 求 ， 如 图 12.7 所 示 。 
第 12 步 ， 在 浏览 器 中 先 运行 lienthtml， 可 以 看 到 客户 端 与 服务 器 端 握手 成 功 ， 如 图 12.8 所 示 。 
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12.7 启动 WebSocket 服务 器 12.8 ”握手 成 功 

| 第 13 步 ， 在 client.html 页 面 中 向 服务 器 发 送 一 条 信息 ， 则 服务 器 会 通过 WebSocket 通道 返回 一 

| 条 响应 信息 ， 如 图 12.9 所 示 。 

寥 提示 : 直接 在 浏览 器 中 运行 WebSocket 服务器 ，PHP 的 配置 参数 (php ini ) 有 个 时 间 限制 ， 如 下 
所 示 , 也 可 以 通过 “new WebSocket('127.0.0.1', 8008, 10000);” 中 第 3 个 参数 控制 轮 询 时 长 ， 
超出 这 个 时 限 ， 就 会 显示 如 图 12.10 所 示 提 示 错 误 。 
default_socket timeout = 60 


© @IocahosVclencntml 女王 CE ©locaihosseverpnp 人 女 ; 


机 三 
[ze Fatal error Maximum execution time of 


30 seconds exceeded in 


响应 信息 : 我 全 张 三 ENwwwwserverphp on line 47 





图 12.9 相互 通信 图 12.10 超出 时 限 提示 错误 
【拓展 】 
用 户 也 可 以 通过 命令 行 运行 WebSocket 服务 ， 实 现 长 连接 。 具 体操 作 步 又 如 下 : 
第 1 步 ， 在 “运行 ”对 话 框 中 启动 命令 行 工具 ， 如 图 12.11 所 示 。 


1。 Windows 本 各 你 F 深 入 的 名称 ,为 人 条 开 相 刘 序 、 
时 tenet 


HAO [emd 





12.11 打开 命令 行 
第 2 步 ， 在 命令 行 中 输入 “php E:\www'server.php”， 然 后 按 Enter 键 运行 WebSocket 服务 器 应 


用 程序 即 可 ， 如 图 12.12 所 示 。 
第 3 步 ， 只 要 不 关闭 命令 行 窗 口 ， 用 户 可 以 随时 在 客户 端 使 用 WebSocket 与 服务 器 端 进行 通信 ， 


或 者 服务 器 主动 向 用 户 推送 信息 。 

肉 提示 在 命令 行 中 能 够 正确 使 用 php 命令 时 ， 应 该 在 Windows 环境 中 设置 好 环境 变量 ， 如 图 12.13 
所 示 。 方法 : 在 “控制 面板 \ 系 统 \ 高 级 系统 设置 ”的 “高 级 ”选项 中 找到 “环境 变量 ” 按 
钮 ， 单 击 即 可 打开 下 图 对 话 框 ， 设 置 好 php.exe 在 本 地 系统 中 所 在 的 路 径 即 可 。 
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图 12.12 运行 WebSocket 服务 | 
3 L= 








dR) 


























图 12.13 设置 PHP 环境 变量 Ea 
12.2.6 ”案例 : 发 送 JSON 对 象 
12.2.5 节 示例 介绍 了 如 何 使 用 WebSockets API 发 送 文本 数据 ， 本 节 示 例 将 演示 如 何 使 用 JSON 对 | 





象 来 发 送 一 切 JavaScript 中 的 对 象 。 使 用 JSON 对 象 的 关键 是 使 用 它 的 两 个 方法 : JSON.parse 和 | 
JSON .stringify， 其 中 JSON.stringify0 方 法 可 以 把 JavaScript 对 象 转换 成 文本 数据 , JSON .parse() 方 法 可 | 
以 将 文本 数据 转换 为 JavaScript 对 象 。 
本 示例 在 12.2.5 节 示例 基础 上 进行 设计 ， 这 里 仅 简单 修改 部 分 代码 。 看 一 下 怎么 使 用 JSON 对 象 
来 发 送 和 接收 JavaScript 对 象 。 
【操作 步骤 】 | 
第 1 步 ， 复 制 12.2.5 节 client.html 文件 ， 在 按钮 单 击 事件 处 理 函 数 中 生成 一 个 JSON 对 象 ， 向 服 | 
务 器 传递 两 个 数据 : 一 个 是 随机 数 ， 一 个 是 用 户 自 己 输入 的 字符 串 。 
send.addEventListener('click. fonctionO { 
Var content = data.value; 
Var message= { 
"randoms" : Math random0，// 生 成 随机 数 
"content" : content /用 户 输入 的 任意 字符 串 





1 
var json= JSON.stringify(message):// 把 JSON 对 象 转换 为 字符 串 
socket.send(json): // 发 送 字 符 串 信息 


D:; 


第 2 步 ， 在 onmessage 事件 处 理 函数 中 接收 字符 串 信息 ， 然 后 把 它 转换 为 SON 对 象 ， 然 后 稍 加 
处 理 并 显示 在 页 面 中 。 
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| > 


| socket.onmessage = function(event) { 
| var dl = documentcreateElement(dl): 
| var jsonData = JSON.parse(event.data); /接收 推送 信息 ， 并 转换 为 JSON 对 象 
| dlLinnerHTML = "<dt>"+jsonData.randoms +"<dt><dd><span></span>"+jsonData.content+"</dd>"; 
仿生 | message.appendChild(d)): 
~ message.scrollTop = message.scrollHeight: 


| 第 3 步 ， 复制 12.2.5 节 serverphp 文件 ， 保 持 源 代码 不 变 。 然 后 ， 按 12.2.5 节操 作 步骤 ， 在 浏览 
器 中 进行 测试 ， 则 演示 效果 如 图 12.14 所 示 。 


GO iocamosycienthtimi 


连接 成 功 ! 
0.7467276855140528 


0.5557704827161314 
3 








示例 效果 图 12.14 解析 JSON 对 象 并 显示 键 值 
| 12.2.7 案例: 使 用 Workerman 框架 通信 


视频 讲解 | 直接 使 用 PHP 编写 WebSockets 应 用 服务 比较 烦琐 ， 对 于 初学 者 来 说 是 一 个 挑战 。 本 节 介绍 如 何 
| 使 用 Workerman 框架 简化 WebSockets 应 用 开发 。 


< 航 注意 : 类似 Workerman 的 框架 比较 多 ， 如 Nodejs、Netty、Undertow、Jetty、Spray-websocket、 
| Vertx、Grizzly 等 ， 本 节 介绍 的 Workerman 框架 比较 简单 、 实 用 。 


| 

| Workerman 是 一 个 高 性 能 的 PHP socket 服务 器 框架 ， 其 目标 是 让 PHP 开发 者 更 容易 地 开发 出 基 
| 于 socket 的 高 性 能 的 应 用 服务 ， 而 不 用 去 了 解 PHP socket 以 及 PHP 多 进程 细节 。 

| 【操作 步骤 】 

| 第 1 步 ， 访 问 https://github.com/walkor/workerman， 下 载 Workerman 框架 。 

| 第 2 步 ， 把 压缩 文件 Workerman-masterzip 解压 到 本 地 站 点 根 目录 下 ， 解 压 并 重 命名 文件 夹 为 
| Workerman 。 


第 3 步 ， 新 建 serverphp 文件 ， 输 入 下 面 代 码 ， 启 用 Workerman。 


<?php 

| // 导 入 库 文件 

| use Workerman\Worker: 

| Tequire_ once "Workerman/Autoloaderphp': 

| /创建 二 个 Worker 监听 2346 端口 ， 使 用 websocket 协议 通信 
$ws worker = new Worker("websocket://127.0.0.1:8008"): 
/启动 4 个 进程 对 外 提供 服务 

| $ws worker->count = 4: 

| // 当 收 到 客户 端 发 来 的 数据 后 返回 响应 信息 $data 给 客户 端 

| $ws_worker->onMessage = function($connection, $data){ 

| 


$connection->send( $data); /向 客户 端 发 响应 信息 $data 
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I 
/运行 
Worker::runAllO:; 
es 
第 4 步 ， 模 仿 12.2.5 节 示 例 操作 ， 在 命令 行 中 输入 下 面 命令 启动 服务 ， 如 图 12.15 所 示 。 
php E:\www\test\server.php 
A 人 人 注意 : 具体 路 径 要 结合 本 地 系统 的 物理 路 径 而 定 。 


CAWindows\system32\emd.exe - php E\www\iest\senerphp - = 匡 汪 | 









图 12.15 启动 服务 


第 5 步 ， 显 示 上 图 提示 信息 ， 说 明 WebSockets 应 用 服务 启动 成 功 。 然 后 复制 12.2.5 节 示例 中 的 | 
client.html， 在 浏览 器 中 预览 ， 则 可 以 进行 握手 通信 了 ， 演 示 效 果 如 图 12.16 所 示 。 





< 全 注意 :Workerman 服务 不 能 够 直接 在 浏览 器 中 启动 ， 否 则 会 显示 如 图 12.17 所 示 的 提示 信息 。 
西 二 避 配 也 一 HH- 


Ylocalhost/test/client 





only run in command line mode 











图 12.16 ”握手 通信 图 12.17 提示 错误 
12.2.8 案例: 推送 信息 


本 节 示 例 模拟 微 信 推 送 功能 ， 为 特定 会 员 主 动 推送 优惠 广告 信息 。 在 浏览 器 中 运行 pushphp， 向 | 
客户 端 uid 为 2 的 会 员 推 送信 息 ， 则 可 以 看 到 clientl.html、client2.html 显示 通知 信息 ， 如 图 12.18 所 | 
示 ， 而 client3.html 没有 收 到 通知 。 

-5 






client1.html 


(a) 推送 成 功 (《b》clientl 收 到 信息 


图 12.18 向 特定 会 员 推 送信 息 
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C [Olocahosiest. 从 5 C |Olocahosiest. 女 3 


client2.html client3.html 





(c) client2 收 到 信息 (d) client3 没有 收 到 信息 
图 12.18 向 特定 会 员 推送 信息 〈 续 7 





具体 操作 步 台 请 扫 码 学 习 。 
12.3 在 线 练 习 


使 用 WebSocket 进行 通信 。 
回 
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WebRTC 视频 直播 


传统 的 Web 通信 ， 主 要 是 借助 服务 器 搭桥 来 实现 不 同 用 户 之 间 的 联系 。 随 着 点 对 点 技 
术 的 出 现 ， 在 两 个 浏览 器 之 间 直 接 实现 通信 成 为 可 能 ， 将 别 是 在 音频 聊天 、 视 频 聊 天 、 大 数 
据 传 输 、 多 人 游戏 场景 中 ， 这 种 技术 优势 尽 显 。WebRTC 是 众多 点 对 点 技术 的 一 个 典范 ， 本 


章 将 重点 介绍 WebRTC 技术 的 使 用 。 


【 学 习 重 点 】 
MI 了 解 WebRTC 的 作用 及 其 组 成 部 分 。 
MH 使 用 getUserMedia 方法 访问 本 地 音频 、 视 频 输 入 设备 。 


MH 这 担 怎 样 实现 WebRTC 通信 。 


Note | 


A 


13.1 WebRTC 基础 











众所周知 , 浏览 器 本 身 不 支持 相互 之 间 直 接 建立 信道 进行 通信 , 都 是 通过 服务 器 进行 中 转 。 例如， 
现在 有 两 个 客户 端 : 甲 和 乙 ， 它 们 想 要 通信 ， 首 先 需要 甲 和 服务 器 、 乙 和 服务 器 之 间 建 立信 道 。 甲 给 





| 乙 发 送 消息 时 ， 甲 先 将 消息 发 送 到 服务 器 上 ， 服 务 器 对 甲 的 消息 进行 中 转 ， 发 送 到 乙 处 ， 反 过 来 也 是 


| 一 样 。 这 样 甲 与 乙 之 间 的 一 次 消息 要 通过 两 段 信道 ， 通 信 的 效率 同时 受制 于 这 两 段 信道 的 带宽 。 同 时 


| 这 样 的 信道 并 不 适合 数据 流 的 传输 , 如 何 建立 浏览 器 之 间 的 点 对 点 传输 ,一 直 困扰 着 开发 者 , WebRTC 
| 应 运 而 生 。 


WebRTC 表示 网 页 实时 通信 (Web Real-Time Communication)， 是 一 个 支持 网 页 浏览 器 进行 实时 


| 语音 对 话 或 视频 对 话 的 技术 。 它 是 一 个 开源 项 目 ， 旨 在 使 浏览 器 能 为 实时 通信 (RTC) 提供 简单 的 
| JavaScript 接口 。 简 单 来 说 , 就 是 让 浏览 器 提供 JavaScript 的 即时 通信 接口 。 这 个 接口 所 创立 的 信道 并 
| 不 像 WebSocket 一 样 ， 打 通 一 个 浏览 器 与 WebSocket 服务 器 之 间 的 通信 ， 而 是 通过 一 系列 的 信 令 ， 建 


立 一 个 浏览 器 与 男 一 个 浏览 器 之 间 (peer-to-peer) 的 信道 ， 这 个 信道 可 以 发 送 任何 数据 ， 而 不 需要 经 
过 服务 器 ， 并 且 WebRTC 通过 实现 MediaStream， 通 过 浏览 器 调用 设备 的 摄像 头 、 麦 克 风 ， 使 得 浏览 


| 器 之 间 可 以 传递 音频 和 视频 。 


目前 ，Chrome 26+、Firefox 24+、Opera 18+ 版 本 的 浏览 器 均 支 持 WebRTC 的 实现 。 在 Chrome 和 


| Opera 浏览 器 中 将 RTCPeerConnection 命名 为 webkitRTCPeerConnection， 在 Firefox 浏览 器 中 将 


RTCPeerConnection 命名 为 mozRTCPeerConnection, 不 过 随 着 WebRTC 标准 的 稳定 ， 各 个 浏览 器 前 组 


| 将 会 被 移 除 。 


13.2 案例 实战 


WebRTC 实现 了 三 个 API， 简 单 说 明 如 下 : 

MediaStream: 能 够 通过 设备 的 摄像 关 和 麦克 风 获 得 视频 、 音 频 的 同步 流 。 

RTCPeerConnection: 用 于 构建 点 对 点 之 间 稳 定 、 高 效 的 流传 输 的 组 件 。 

RTCDataChannel: 在 浏览 器 间 (点 对 点 ) 建立 一 个 高 吞吐 量 、 低 延 时 的 信道 ， 用 于 传输 任 
意 数 据 。 


13.2.1 访问 本 地 设备 


MediaStream API 为 WebRTC 提供 了 从 设备 的 摄像 头 、 麦 克 风 获取 视频 、 音 频 流 数据 的 功能 。 用 
户 可 以 通过 调用 navigator getUserMedia0 访 问 本 地 设备 ， 该 方法 包含 三 个 参数 : 
约束 对 象 (constraints object) 。 
调用 成 功 的 回调 函数 ， 如 果 调 用 成 功 ， 传 递 给 它 一 个 流 对 象 。 
调用 失败 的 回调 函数 ， 如 果 调 用 失败 ， 传 递 给 它 一 个 错误 对 象 。 
痊 提示 : 由 于 浏览 器 实现 的 不 同 , 经 常会 在 标准 版 本 的 方法 前 面 加 上 前 级 , 一 个 兼容 版 本 代码 如 下 : 
javacriptvar getUserMedia = (navigator getUserMedia | 
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navigator webkitGetUserMedia | 
navigator. mozGetUserMedia || 
navigator.msGetUserMedia): 

【示例 】 下 面 示例 演示 如 何 调用 getUserMedia0 方 法 访问 本 地 摄像 头 。 


<video id="myVideo" width="400" height="300" autoplay></video> 
<script> 
Davigator getUserMedia = navigator. getUserMedia | navigatorwebkitGetUserMedia || window.navigator mozGetUserMedia; 
window.URL = window.URL || window.webkitURL; 
Var Video = document.getElementById('myVideo"): 
navigator.getUserMedia( {video:true, audio:false}, | 
function(stream) { 
Video.src = window.URL .createObjectURL(stream): 





在 Chrome 浏览 器 中 打开 页 面 ， 浏 览 器 将 首先 询问 用 户 是 否 允 许 脚 本 访问 本 地 摄像 头 ， 如 图 13.1 
所 示 。 当 用 户 单 击 “ 允 许 ” 按 钮 后 ， 浏 览 器 中 会 显示 从 用 户 本 地 摄像 头 中 捕 提 到 的 影像 ， 如 图 13.2 
所 示 。 


DD localhosthesttestht™ D localhost/tesinest Om x 


© © localhost/tesW/testntml CC © localhost/test/testntml 
hatpyhiocalheat 到 
人 





13.1 询问 权限 13.2 捕捉 摄像 头 视 频 流 


< 所 注意 : HTML 文件 要 放 在 服务 器 上 ， 否 则 会 得 到 一 个 NavigatorUserMediaError 的 错误 ， 显 示 
PermissionDeniedError。 也 可 以 在 命令 行 中 使 用 cd 命令 ， 具 体 方法 : 进入 HTML 文件 所 
在 目录 ，python -m SimpleHTTPServer (需要 安装 python )。 然 后 ， 在 浏览 器 地 址 栏 中 输入 | 
http://localhost:8000/test.html， 按 Enter 键 即 可 。 


在 getUserMedia0 方 法 中 ,第 一 个 参数 值 为 一 个 约束 对 象 , 该 对 象 包含 一 个 video 属性 和 一 个 audio 
属性 ， 属 性 值 均 为 布尔 类 型 。 当 video 属性 值 为 true 时， 表示 捕捉 视频 信息 ; 当 video 属性 值 为 false 
时 ， 表 示 不 捕 提 视 频 信息 ; 当 audio 属性 值 为 tue 时 ,表示 捕捉 音频 信息 ， 当 audio 属性 值 为 flse 时，| 
表示 不 捕捉 音频 信息 。 浏览 器 弹出 要 求 用 户 给 予 权限 的 请 求 时 , 也 会 根据 约束 对 象 的 不 同 而 有 所 改变 。| 
注意 ， 在 一 个 浏览 器 标签 中 设置 的 getUserMedia0 约 束 将 影响 之 后 打开 的 所 有 标签 中 的 约束 。 

第 二 个 参数 值 为 访问 本 地 设备 成 功 时 所 执行 的 回调 函数 , 该 回调 函数 具有 一 个 参数 ,参数 值 为 一 











"295。 


此 


CO Ppstesss 从 入 门 到 精通 ( 微 课 精 编 版 ) 
区 
SS 
个 MediaStream 对 象 ， 当 浏览 器 执行 getUserMedia0 方 法 时 将 自动 创建 该 对 象 。 该 对 象 代表 同步 媒体 
数据 流 。 例如， 一 个 来 自 于 摄像 头 、 麦 克 风 输入 设备 的 同步 媒体 数据 流 往往 是 来 自 于 视频 轨道 和 音频 
轨道 的 同步 数据 。 

每 一 个 MediaStream 对 象 都 拥有 一 个 字符 串 类 型 的 ID 属性 ， 如 “elc55526-a70b-4d46-b5c1- 
dd19f9dc6beb”， 以 标识 每 一 个 同步 媒体 数据 流 。 该 对 象 的 getAudioTracks0 方 法 或 getVideoTracks() 方 
法 将 返回 一 个 MediaStreamTrack 对 象 的 数组 。 

MediaStreamTrack 对 象 表示 一 个 视频 轨道 或 一 个 音频 轨道 , 每 一 个 MediaStreamTrack 对 象 包含 两 
个 属性 : 

回 ”kind: 字符 串 类 型 ， 标 识 轨道 种 类 ， 如 “video” 或 “audio”。 

回 label: 字符 串 类 型 ， 标 识 音频 通道 或 视频 通道 ， 如 “HP Truevision HD (04f2:b2f8)” 

getUserMedia 方法 中 第 三 个 参数 值 为 访问 本 地 设备 失败 时 所 执行 的 回调 函数 ， 该 回调 函数 具有 一 
个 参数 ， 参 数值 为 一 个 error 对 象 ， 代 表 浏览 器 抛 出 的 错误 对 象 。 

上 面 示例 结合 HTML5 的 video 元 素 。window 对 象 的 URL.createObjectURL0O 方 法 允许 将 一 
MediaStream 对 象 转换 为 一 个 Blob URL 值 ， 以 便 将 其 设置 为 一 个 video 元 素 的 属性 ， 这 样 可 以 通过 
video.src 把 视频 流 显 示 在 网 页 中 。 


< 注意 ;同时 为 video 元 素 设置 autoplay 属性 ， 如 果 不 使 用 该 属性 ， 则 video 元 素 将 停留 在 所 获取 
的 第 一 帧 画面 位 置 。 
【拓展 】 
约束 对 象 可 以 被 设置 在 getUserMedia0 和 RTCPeerConnection 的 addStream() 方 法 中 ， 这 个 约束 对 
象 是 WebRTC 用 来 指定 接收 什么 样 的 流 的 ， 其 中 可 以 定义 如 下 属性 : 
video: 是 否 接收 视频 流 
audio: 是 否 接 收音 频 流 
MinWidth: 视频 流 的 最 小 宽度 。 
MaxWidth: 视频 流 的 最 大 宽度 。 
MinHeight: 视频 流 的 最 小 高 度 。 
MaxHiehgt: 视频 流 的 最 大 高 度 。 
MinAspectRatio: 视频 流 的 最 小 宽 高 比 。 
MaxAspectRatio: 视频 流 的 最 大 宽 高 比 。 
MinFramerate: 视频 流 的 最 小 帧 速率 。 
MaxFramerate: 视频 流 的 最 大 帧 速率 。 


人 2.2 ”视频 截图 


本 例 使 用 Canvas API 的 图 形 上 下 文 对 象 的 drawImage0 方 法 将 video 元 素 中 的 某 一 帧 视频 画面 输 
国 到 canvas 元 素 中 ， 实 现实 时 截图 功能 。 

示例 主要 代码 如 下 所 示 : 

<video id="myVideo" width="400" height="300" autoplay></video> 

<button id="btn"> 视 频 截 图 </button> 

<img src="" id="imge" ></img> 

<canvas width="800" height="600" style="display:none:" id="canvas" ></canvas> 

















办 


罗 罗 罗 罗 办 罗 罗 罗 办 
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<script> 

Tavigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator mozGetUserMedia: 

window.URL = window.URL || window.webkitURL:; 

Var Video = document.getElementById('myVideo"): 

Var btn = document.getElementById(btn"): 

btn.addEventListener('click’. snapshot false): 

Var canvas = document.getElementById(Ccanvas): 

Var ctx = canvas.getContext(2d"); 

Var localMediaStream = null: 

navigator.getUserMedia( {video:true, audio:false}、 | 

function(stream) { | 
Video.src = Window.URL.createObjectURL(stream): 
localMediaStream = stream: 





ctx.drawImage(video, 0. 0): 
document.getElementById(img').src = canvas.toDataURL(image/png’); 
} 
b 
</script> 
在 浏览 器 中 访问 页 面 ， 单 击 “ 视 频 截图 ”按钮 ， 页 面 中 的 img 元 素 将 显示 鼠标 单 击 时 video 元 素 
中 显示 的 影像 ， 如 图 13.3 所 示 。 








图 13.3 视频 截图 


13.2.3 ”视频 对 话 基础 


WebRTC 使 用 RTCPeerConnection 在 浏览 器 之 间 传 递 流 数据 ， 这 个 流 数据 通道 是 点 对 点 的 ， 不 需 | 
要 经 过 服务 器 进行 中 转 。 但 是 这 并 不 意味 着 服务 器 无 用 ， 因 为 还 需要 服务 器 传递 信 令 〈signaling) 来 L 
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建立 这 个 信道 。WebRTC 没有 定义 用 于 建立 信道 的 信 令 的 协议 : 信 令 并 不 是 RTCPeerConnection API 
的 一 


部 分 。 
由 于 没有 定义 具体 的 信 令 的 协议 ， 用 户 可 以 选择 任意 方式 (如 Ajax、WebSocket)， 采 用 任意 的 





协议 (如 SIP、XMPP) 来 传递 信 令 ， 建 立信 道 。 


需要 信 令 来 交换 的 信息 包括 三 种 : 

session 信息 : 用 来 初始 化 通信 ， 还 有 报错 信息 等 。 

回 ”网 络 配置 : 如 王 地 址 和 端口 等 。 

回 ”媒体 适 配 : 发 送 方 和 接收 方 的 浏览 器 能 够 接收 什么 样 的 编码 器 和 分 辨 率 。 
这 些 信息 的 交换 应 该 在 点 对 点 的 流传 输 之 前 就 全 部 完成 。 
通过 服务 器 建立 信道 ，WebRTC 需要 服务 器 对 其 进行 四 方面 的 功能 支持 : 

用 户 发 现 以 及 通信 。 

信 令 传输 。 

NAT/ 防 火 墙 穿越 。 

如 果 点 对 点 通信 建立 失败 ， 可 以 作为 中 转 服务 器 。 

建立 点 对 点 信道 的 主要 问题 就 是 NAT/ 防 火 墙 穿越 技术 。 在 RTCPeeConnection 中 , 使 用 ICE 框架 


可 以 保证 RTCPeerConnection 能 实现 NAT 穿越 。 


浏览 器 兼容 方法 : 

Var PeerConnection = (window.PeerConnection || 
window.webkitPeerConnection00 || 
window.webkitRTCPeerConnection || 
window.mo 上 zRTCPeerConnection): 


13.2.4 ”视频 对 话 实现 


为 了 在 浏览 器 与 浏览 器 之 间 进行 P2P 通信 , 必须 首先 知道 对 方 的 卫 地 址 及 动态 分 配 的 UDP 端口 


号 。 因 此 在 建立 P2P 通信 之 前 ， 首 先 需要 使 用 WebRTC 交换 下 面 这 些 信 息 。 


加 ”SDP: 一 种 会 话 描述 协议 ， 它 以 字符 串 的 形式 显示 如 下 浏览 器 信息 。 
> ”在 浏览 器 与 浏览 器 之 间 所 进行 的 会 话 中 将 要 使 用 的 媒体 种 类 (音频 、 视 频 ) 、 媒 体格 
式 (codec) 。 
通信 双方 所 使 用 的 卫 地 址 和 端口 号 。 
P2P 数据 传输 协议 ， 在 WebRTC 中 为 Secure RTP。 
通信 时 所 使 用 的 带宽 。 
> ”会 话 属性 ， 如 名 称 、 标 识 符 、 激 活 时 间 等 。 
ICE: 一 种 以 UDP 为 基础 的 请 求 /回答 模式 的 多 媒体 会 话 ,， 用 于 实现 NAT 穿越 的 协议 。 它 以 
清单 的 形式 描述 P2P 通信 时 ， 可 以 使 用 如 下 通信 途径 。 
> ”使 用 P2P 进行 直接 通信 。 
> 使 用 STUN (为 了 穿越 NAT 而 进行 端口 映射 ) 实现 突破 NAT 网关 的 P2P 通信 。 
> ”使 用 TURN 中 继 服务 器 进行 突破 防火 墙 的 中 继 通 信 。 
ICE 协议 在 网 络 上 通过 最 短途 径 〈 网 络 负荷 最 小 的 途径 ) 选择 被 发 现 的 候选 者 ， 并 按 优 先 级 依 序 


了 


| 列举 这 些 候 选 者 。 


在 P2P 通信 之 前 , 首先 需要 双方 交换 SDP 和 ICE 信息 , 这 个 过 程 称 为 “ 信 令 ”。 事实 上 ，WebRTC 
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中 并 不 规定 信 令 方式 ， 用 户 可 以 自由 选择 。 下 面 示例 演示 了 一 种 原始 的 方式 ， 通 过 用 户 复制 /粘贴 的 | 
方式 为 两 个 浏览 器 传递 信 令 。 
示例 主要 代码 如 下 所 示 : 


<body> 
<button type="button" onclick="startVideo0:"> 捕 获 视频 </button> | 
<button type="button" onclick="stopVideo0:"> 停 止 捕获 </button> Note 
<button type="button" onclick="connect0:;"> 连 接 </button> 
<button type="button" onclick="hangUpO:"> 挂 断 </button><hr /> 
<div> 
<video id="local-video" autoplay></video> 
<h3> 本 人 </h3> 
</div> 
<div> 
<video id="remote-video" autoplay></video> 
<h3> 对 方 </h3> 
</div><hr > 
<p> 发 送 的 SDP 字符 串 :<br /><textarea id="text-for-send-sdp" disabled="1"></textarea></p> 
<p> 接 收 的 SDP 字符 串 :<br /><textarea id="text-for-receive-sdp"></textarea><br /> 
<button type="button" onclick="onSDPO:"> 验 证 SDP</button></p> 
<hr 亡 
<p> 发 送 的 ICE 字符 串 :<br /><textarea id= "text-for-send-ice" disabled="1"></textarea></p> 
<p> 接收 的 ICE 字符 串 :<br /><textarea id="text-for-receive-ice"></textarea><br /> 
<button type="button" onclick="onICEO:"> 验 证 ICE</button></p> 
<script> 
Var localVideo = document.getElementById('local-video"): 
Var remoteVideo = document.getElementById(remote-video): 
Var localStream = null: 
Var peerConnection = null; 
Var peerStarted = false: 
Var mediaConstraints = fmandatory': {OfferToReceiveAudio':false. 'OfferToReceiveVideo':true }}: 
var textForSendSDP = document.getElementById(text-for-send-sdp): 
Var textForSendICE = document.getElementById(Ctext-for-send-ice'): 
Var textToReceiveSDP = document.getElementById(text-for-receive-sdp): 
Var textToReceiveICE = document.getElementById(text-forreceive-ice): 











var iceSeparator = '------ ICE 候选 者 -一 -一 
Var CR = String.fromCharCode(13): 

/交换 信息 

function onSDPO { 


Var text = textToReceiveSDPvalue: 
Var evt = JSON.parse(text): 
if (peerConnection) { 
onAnswer(evt): 
Jelse { 
onOffer(evt): 
} 
textToReceiveSDPvalue ="": 
} 
function onICEO { 
Var text = textToReceiveICE.value; 
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Var arr = text.split(iceSeparator): 
for (vari= 1. len = arrlength; i< len: i++) { 
var evt = JSON.parse(arr{i]): 
onCandidate(evt): 





} 
textToReceiveICE.value =""; 





} 
Note function onOffer(evt) { 


console.log(" 接 收 到 offer...") 
console.log(evt): 
setOffer(evt): 
sendAnswer(evt): 

9 

function onAnswer(evt) { 
console.log(" 接 收 到 Answer...") 


console.log(evt): 
setAnswer(evt); 
} 
function onCandidate(evt) { 
Var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, 
candidate:evt.candidate}); 
console.log(" 接 收 到 Candidate...") 
console.log(candidate): 
peerConnection.addIceCandidate(candidate): 
} 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| function sendSDP(sdp) { 
| var text = JSON.stringify(sdp); 
| textForSendSDPvalue = text; 
me 
| function sendCandidate(candidate) { 
| Var text = JSON .stringify(candidate): 
| console.log(text): 
| textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR): 
| textForSendICE.scrollTop = textForSendICE.scrollHeight: 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


} 
// 视 频 处 理 
function startVideoO { 
navigator.webkitGetUserMedia( {video: true. audio: true}. 
function (stream) {// success 
localStream = stream: 
localVideo.stc = window.URL .createObjectURL(stream): 
localVideo.playO: 
localVideo.volume = 0: 
} 
function (error) { // error 
console.error(' 发 生 了 一 个 错误 : [错误 代码 : “+ error.code +]); 
Tetum: 
Dp: 
} 
function stopVideoO { 
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localVideo.src =""; 
localStream.stopO: 


/处 理 连接 
function prepareNewConnection0O { 
var pc_config = {"iceServers":[]}:; 
Var peer = null; 
yt 
peer =new WebkitRTCPeerConnection(pc_config): 
}catch (e) { 
console.log(" 建 立 连接 失败 ， 错 误 :" + e.message); 


} 
// 发 送 所 有 ICE 候选 者 给 对 方 
peer.onicecandidate = function (evt) { 
if (evt.candidate) { 
console.log(evt.candidate); 
sendCandidate( {type: "candidate", 
sdpMLineIndex: evt.candidate.sdpMLineIndex, 
sdpMid: evt.candidate.sdpMid. 
candidate: evt.candidate.candidate}): 
} 


上 
console.log(' 添 加 本 地 视频 流 ..."); 
peer.addStream(localStream); 
peer.addEventListener("addstream", onRemoteStreamAdded, false): 
peer.addEventListener("removestream". onRemoteStreamRemoved, false): 
// 当 接收 到 远程 视频 流 时 ， 使 用 本 地 video 元 素 进行 显示 
function onRemoteStreamAdded(event) { 
console.log("Added remote stream"): 
remoteVideo.src = window.URL .createObjectURL(event.stream); 


} 
// 当 远程 结束 通信 时 ， 取 消 本 地 video 元 素 中 的 显示 
function onRemoteStreamRemoved(event) { 
console.log(" 移 除 远程 视频 流 "); 
remoteVideo.src = ""; 
} 
Teturn peer: 
} 
function sendOfferO { 
peerConnection = prepareNewConnectionO: 
peerConnection.createOffer(fimction (sessionDescription) { // 成 功 时 调用 的 回调 函数 
peerConnection.setLocalDescription(sessionDescription): 
console log(" 发 送 : SDP"); 
console log(sessionDescription): 
sendSDP(sessionDescription): 
}. fonction (em) { /失败 时 调用 的 回调 函数 
console.log(" 创 建 Offer 失败 "): 
}. mediaConstraints): 
} 
function setOffer(evt) { 
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if (peerConnection) { 
console.error('peerConnection 已 存在 !"); 
} 
peerConnection = prepareNewConnection(): 
peerConnection.setRemoteDescription(new RTCSessionDescription(evt)); 
} 
function sendAnswer(evt) { 
console.log(' 发 送 Answer. 创 建 远程 会 话 描述 ..… ): 
if(! peerConnection) { 
console.error('peerConnection 不 存在 !"); 
Teturm: 
} 
peerConnection.createAnswer(function (sessionDescription) { // 成 功 时 调用 的 回调 函数 
peerConnection.setLocalDescription(sessionDescription): 
console.log(" 发 送 : SDP"); 
console.log(sessionDescription); 
sendSDP(sessionDescription):; 
}, function 0 { // 失 败 时 调用 的 回调 函数 
console.log(" 创 建 Answer 失败 "); 
}, mediaConstraints); 
上 
function setAnswer(evt) { 
if(! peerConnection) { 
console.error('peerConnection 不 存在 !"); 
returmn; 
} 
peerConnection.setRemoteDescription(new RTCSessionDescription(evt)): 


} 
// 处 理 用 户 UI 事件 
// 开 始 建立 连接 
function connectO { 
if(!peerStarted && localStream) { 
sendOfferO: 
peerStarted = true: 
} else{ 
alert(" 请 首先 捕获 本 地 视频 数据 ."); 
} 


} 

// 停 止 连接 

function hangUpO { 
console.log(" 挂 断 ."); 


stopO: 

呈 

function stopO { 
peerConnection.close(): 
peerConnection = null: 
peerStarted = false: 

</script> 

</body> 
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志 负 注意: 本 例 需 要 在 支持 SDP 协议 和 ICE 协议 的 Web 服务 器 中 运行 ， 如 Apache 服务 器 。 

上 机 测试 步骤 如 下 : 

第 1 步 ， 在 Chrome 或 Opera 浏览 器 中 预览 本 例文 件 ， 分 别 在 两 个 浏览 器 窗口 或 标签 页 中 访问 页 
面 地址 。 

第 2 步 ， 分 别 单 击 “ 捕 获 视频 ”按钮 ， 然 后 单 击 “ 人 允许 ”按钮 允许 浏览 器 访问 本 地 摄像 头 和 麦克 
风 设 备 ， 页 面 中 将 显示 从 本 地 摄像 头 实 时 捕获 的 影像 ， 如 图 13.4 所 示 。 












D lahoanecvec | © x 玫 
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图 13.4 捕获 本 地 视频 流 


第 3 步 ， 在 第 一 个 浏览 器 标签 页 中 单 击 “ 连 接 ” 按 钮 ， 这 时 在 “发 送 的 SDP 字符 串 ” 文 本 框 中 
自动 生成 一 段 SDP 字符 串 ， 如 图 13.5 所 示 。 


Decalhonwmestheee/ 三 
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13.5 生成 的 SDP 字符 串 


第 4 步 ， 复 制 第 一 个 浏览 器 标签 页 中 生成 的 SDP 字符 串 ， 即 “发 送 的 SDP 字符 串 :” 文 本 框 中 的 
全 部 文本 。 

第 5 步 ， 切 换 到 第 二 个 浏览 器 标签 页 中 ， 在 “接收 的 SDP 字符 串 :” 文 本 框 中 粘贴 第 一 个 浏览 器 
标签 页 生成 的 SDP 字符 串 ， 如 图 13.6 所 示 。 

第 6 步 ， 单 击 “ 验 证 SDP” 按 钮 ， 第 二 个 浏览 器 标签 页 内 “发 送 的 SDP 字符 串 :” 文 本 框 显示 远 | 
程 的 SDP 描述 字符 串 ， 如 图 13.7 所 示 。 | 

第 7 步 , 将 第 二 个 浏览 器 标签 页 内 “发 送 的 SDP 字符 串 :” 文 本 框 中 的 SDP 描述 字符 串 全 部 复制 | 
到 第 一 个 浏览 器 标签 页 内 “接收 的 SDP 字符 串 :” 文 本 框 中 。 然 后 单 击 “ 验 证 SDP” 按 钮 ， 完 成 SDP 
信息 交换 过 程 。 
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图 13.6 传递 SDP 字符 串 
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图 13.7 远程 SDP 字符 串 


第 8 步 ， 将 第 一 个 浏览 器 标签 页 内 “发 送 的 ICE 字符 串 :” 文 本 框 中 的 全 部 文本 复制 到 第 二 个 浏 
览 器 标签 页 内 “接收 的 ICE 字符 串 :” 文 本 框 中 ， 如 图 13.8 所 示 。 














图 13.8 复制 本 地 ICE 字符 串 
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第 9 步 ， 在 第 二 个 浏览 器 标签 页 内 单 击 “ 验 证 ICE” 按钮， 完成 ICE 信息 交换 验证 ， 如 图 13.9 | 
所 示 。 | 





图 13.9 验证 本 地 ICE 字符 串 
第 10 步 ， 如 果 需 要 ， 还 需要 将 第 二 个 浏览 器 标签 页 内 “发 送 的 ICE 字符 串 :” 文 本 框 中 的 全 部 文 
本 复制 到 第 一 个 浏览 器 标签 页 内 的 “接收 的 ICE 字符 串 :” 文 本 框 中 , 单 击 第 一 个 浏览 器 标签 页 内 “ 验 
证 ICE” 按 钮 。 
第 11 步 ， 现 在 两 边 窗口 同时 显示 摄像 头 中 捕捉 到 的 影像 ， 通 信 正 式 开 始 。 第 一 个 浏览 器 标签 中 
的 显示 效果 如 图 13.10 所 示 。 





图 13.10 显示 效果 示例 效果 
13.2.5 ”SDP 交换 | 


本 节 重 点 分 析 13.2.4 节 示例 的 SDP 交换 过 程 。 
第 1 步 ， 当 单 击 “ 连 接 ”按钮 之 后 ， 将 调用 connect0 函 数 ， 开 始 建立 连接 ， 代 码 如 下 所 示 : 
function connectO { 
if (!peerStarted && localStream) { 
sendOffer(): 
peerStarted = true: // 标 识 变 量 ， 标 识 开始 视频 对 话 
}else{ 
alert(" 请 首先 捕获 本 地 视频 数据 ."): 
} 
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| 第 2 步 ， 在 connect0 函 数 中 调用 sendOffer0 函 数 。sendOffer0 函 数 的 代码 如 下 所 示 : 
| 
| function sendOfferO { 
| peerConnection = prepareNewConnection(): 
S| peerConnection.createOffer(function (sessionDescription) { /成功 时 调用 的 回调 函数 
和 ~ | peerConnection.setLocalDescription(sessionDescription): 
| console.log(" 发 送 : SDP"); 

console.log(sessionDescription): 

sendSDP(sessionDescription):; 
}, function (err) { /失败 时 调用 的 回调 函数 

console.log(" 创 建 Offer 失败 "); 
}, mediaConstraints); 





} 


第 3 步 ， 在 sendoOffer0 函数 中 调用 prepareNewConnection0 函数， 准备 处 理 连 接 。 
| prepareNewConnection0) 函 数 的 代码 如 下 所 示 。 


function prepareNewConnection() { 
Var pc_config = {"iceServers":[]}: 
var peer = null; 
ty 
peer=new WebkitRTCPeerConnection(pc_config): 
} catch (e) { 
console .log(" 建 立 连接 失败 ， 错 误 : "+ e.message); 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| } 

| // 发 送 所 有 ICE 候选 者 给 对 方 

| peer.onicecandidate = function (evt) { 

| if (evt.candidate) { 

| console.log(evt.candidate): 

| sendCandidate( {type: "candidate", 

| sdpMLineIndex: evt.candidate.sdpMLineIndex. 
| sdpMid: evt.candidate.sdpMid, 
| candidate: evt.candidate.candidate}): 
| 

| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


}; 
console.log(' 添 加 本 地 视频 流 .…); 
peer.addStream(localStream): 
peer.addEventListener("addstream", onRemoteStreamAdded. false): 
peer.addEventListener("removestream". onRemoteStreamRemoved. false): 
// 当 接收 到 远程 视频 流 时 ， 使 用 本 地 video 元 素 进行 显示 
function onRemoteStreamAdded(event) { 
console.log("Added remote stream"): 
remoteVideo.src = window.URL .createObjectURL(event.stream): 


} 
// 当 远程 结束 通信 时 ， 取 消 本 地 video 元 素 中 的 显示 
function onRemoteStreamRemoved(event) { 
console.log(" 移 除 远程 视频 流 "); 
remoteVideo.src = ""; 


} 
Tetum peer: 
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第 4 步 ， 在 prepareNewConnection() 函 数 中 创建 RTCPeerConnection 对 象 ， 代 码 如 下 所 示 。 目 前 | 
在 浏览 器 中 需要 使 用 供应 商 前 级 。 | 


peer = new WebkitRTCPeerConnection(pc_config): 


可 以 将 一 个 RTCConfiguration 对 象 用 作 RTCPeerConnection 对 象 的 构造 函数 的 一 个 参数 ， 该 对 象 | 
用 于 配置 WebRTC 通信 时 所 使 用 的 ICE 服务 器 ， 代 码 如 下 所 示 。 | 


Var configuration= { iceServers: [{ 
urls: "stun:stun.services.mozilla.com", | 
Usemame: "louis@mozilla.com", 
credential: "webrtcdemo" 
上 
urls: ["stun:stun.example.com", "stun:stun-1.example.com"] 





HD}: 
Var pc= new RTCPeerConnection(configuration): 


RTCConfiguration 对 象 有 一 个 iceServers 属性 ， 属 性 值 为 一 个 由 一 个 或 多 个 RTCIceServer 对 象 所 | 
组 成 的 数组 。 每 一 个 RTCIceServer 对 象 代表 一 个 ICE 服务 器 ， 具 有 如 下 所 示 的 一 些 属性 。 
回 url， 字符 串 类 型 ， 用 于 指定 WebRTC 通信 所 使 用 的 STUN 服务 器 或 TURN 服务 器 的 
URL 地 址 ， 当 使 用 STUN 服务 器 或 TURN 服务 器 时 必须 指定 。 
回 usemame: 字符 串 类 型 ， 用 于 指定 当 访 问 STUN 服务 器 或 TURN 服务 器 时 所 使 用 的 用 
户 名 ， 当 使 用 STUN 服务 器 或 TURN 服务 器 时 该 属性 为 一 个 可 选 的 属性 。 
回 ”credential: 字符 串 类 型 ， 用 于 指定 当 访问 STUN 服务 器 或 TURN 服务 器 时 所 使 用 的 用 户 密 
码 ， 当 使 用 STUN 服务 器 或 TURN 服务 器 时 该 属性 为 一 个 可 选 的 属性 。 
例如 ， 如 果 需 要 实现 不 同 计算 机 中 的 突破 NAT 网 关 的 P2P 通信 时 ， 可 以 使 用 RTCConfiguration 
对 象 定义 P2P 通信 所 使 用 的 STURN 服务 器 ， 代 码 如 下 所 示 : 
Var pc_config = {"iceServers":[{"url":"stun:stun.1.g00gle.com:19302"}]}: 
Var peer=null: 
ty{ 
peer= new WebkitRTCPeerConnection(pc_config) 
}catch(e){ 
console.log(" 建 立 连接 失败 ， 错 误 :" + e.message); 





} 


在 prepareNewConnection() 函 数 中 创建 RTCPeerConnection 对 象 并 将 其 返回 后 , 需 创建 SDP。SDP | 
包括 两 种 : 用 于 通信 呼叫 的 Offer、 用 于 应 答 的 Answer。 
第 5 步 ， 可 以 使 用 RTCPeerConnection 对 象 的 createOffer0 函 数 创建 用 于 通信 呼叫 的 Offer。 代 码 | 
可 以 参考 第 2 步 代码 。createOffer0 函 数 包含 3 个 参数 : | 
第 一 个 参数 为 创建 Offer 成 功 时 调用 的 回调 函数 ， 该 函数 使 用 一 个 参数 ， 参 数 为 创建 Offer 成 功 | 
时 被 自动 创建 的 RTCSessionDescription 对 象 , 该 对 象 代表 呼叫 方 的 本 地 会 话 描述 ,具有 以 下 两 个 属性 。 
type: 一 个 RTCSdpType 枚 举 值 ， 可 能 的 值 如 下 所 示 。 
> “offer: 一 个 呼叫 双方 的 发 起 方 。 
> ”answer: 一 个 呼叫 双方 的 接收 方 。 
> ”pranswer: 一 个 呼叫 方 做 出 的 临时 回答 ， 当 接收 方 给 出 明确 响应 后 可 能 被 修改 。 
sdp: 一 个 SDP 格式 的 会 话 描述 字符 串 。 
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第 二 个 参数 为 可 选 参数 ， 参 数值 为 创建 Offer 失败 时 调用 的 回调 函数 。 该 回调 函数 有 一 个 参数 ， 
参数 值 为 创建 Offer 失败 时 抛 出 的 错误 对 象 ， 本 例 中 未 使 用 。 

第 三 个 参数 为 可 选 参数 ， 参 数值 为 一 个 MediaConstraints 对 象 。 该 对 象 具有 一 个 mandatory 属性 ， 
属性 值 为 一 个 对 象 ， 该 对 象 具 有 一 个 布尔 类 型 的 OfferToReceiveAudio 属性 ， 属 性 值 为 tue 时 ， 表 示 
接收 对 方 传 过 来 的 音频 信息 ， 属 性 值 为 false 时 表示 不 接收 对 方 传 过 来 的 音频 信息 。 该 对 象 同时 有 一 
个 布尔 型 的 OfferToReceiveVideo 属性 ， 属 性 值 为 tue 时 ， 表 示 接 收 对 方 传 过 来 的 视频 信息 ， 属 性 值 
为 false 时 ， 表 示 不 接收 对 方 传 过 来 的 视频 信息 。 

在 创建 Offer 成 功 时 所 执行 的 回调 函数 中 ， 可 以 使 用 RTCPeerConnection 对 象 的 





| setLocalDescription() 方 法 保存 WebRTC 连接 所 使 用 的 本 地 会 话 描述 ， 该 方法 中 可 以 使 用 三 个 参数 ; 


第 一 个 参数 为 一 个 代表 会 话 描述 的 RTCSessionDescription 对 象 , 该 对 象 是 在 创建 Offer 时 自 
动 设置 的 本 地 会 话 描述 。 代 码 如 下 所 示 : 
peerConnection.setLocalDescription(sessionDescription); 
第 二 个 参数 与 第 三 个 参数 均 为 可 选 参数 ， 参 数值 分 别 为 保存 本 地 会 话 描述 成 功 时 调用 的 回 
调 函 数 和 保存 本 地 会 话 失败 时 调用 的 回调 函数 。 
第 6 步 ， 在 保存 本 地 会 话 描述 后 ， 可 以 将 本 地 会 话 描述 发 送 给 对 方 ， 在 本 例 中 将 其 显示 在 “发 送 
的 SDP 字符 串 :” 文 本 框 中 ， 由 用 户 复制 给 另 一 个 浏览 器 标签 页 内 的 “接收 的 SDP 字符 串 :” 文 本 框 
中 以 实现 手工 发 送 。 代 码 如 下 所 示 : 


sendSDP(sessionDescription): 


function sendSDP(sdp) { 
Var text = JSON.stringify(sdp); 
console.log(text): 
textForSendSDP.value = text; 
} 


第 7 步 , 在 被 呼叫 方 粘贴 SDP 信息 , 单 击 “ 验 证 SDP” 按 钮 后 , 依 序 调用 onSDPO 函 数 、onOfferO 
函数 和 setOffer0 函 数 ， 代 码 如 下 所 示 : 


function onSDPO { 
Var text = textToReceiveSDP.value; 
Var evt = JSON.parse(text): 
if (peerConnection) { 
onAnswer(evi): 


textToReceiveSDP value ="": 

J} 

function onOffer(evt) { 
console.log(" 接 收 到 offer..…") 
console.log(evt): 
setOffer(evt): 
sendAnswer(evt): 

} 

function setOffer(evt) { 
if(peerConnection) { 


。308 。 


第 13 章 “WebRTC 视 频 直 播 3 | 
console.error('peerConnection 已 存在 由: | 
， 
peerConnection = prepareNewConnection(); 
peerConnection.setRemoteDescription(new RTCSessionDescription(evi)): 
} 


在 setOffer() 函 数 中 ， 首 先 调 用 prepareNewConnection0 〇 函数 创建 RTCPeerConnection 对 象 实例 ， 
然后 调用 该 对 象 的 setRemoteDescription() 方 法 保存 接收 到 的 远程 会 话 描述 ,在 本 例 中 为 被 粘贴 在 第 二 | 
个 浏览 器 标签 页 内 “接收 的 SDP 字符 串 :” 文 本 框 中 的 信息 。 该 方法 包含 三 个 参数 : | 

第 一 个 参数 为 一 个 会 话 描述 的 RTCSessionDescription 对 象 ， 本 例 利用 接收 到 的 远程 会 话 描 | 

述 来 创建 该 对 象 。 
回 ”第 二 个 参数 和 第 三 个 参数 均 为 可 选 参数 ， 参 数值 分 别 为 保存 远程 会 话 描述 成 功 时 调用 的 回 
调 函数 ， 以 及 保存 远程 会 话 失败 时 调用 的 回调 函数 。 
第 8 步 ， 在 onOffer0 函 数 中 调用 setOffer0 函 数 之 后 ， 调 用 sendAnswer0 函 数 。sendAnswer(0 函 数 
代码 如 下 所 示 : 
function sendAnswer(evt) { 

console.log(' 发 送 Answer. 创 建 远程 会 话 描述 .… ); 

if(! peerConnection) { 
console.error('peerConnection 不 存在 !"); 
returmn; 

} 

peerConnection.createAnswer(function (sessionDescription) { /成功 时 调用 的 回调 函数 
peerConnection.setLocalDescription(sessionDescription): 
console.log(" 发 送 : SDP"); 
console.log(sessionDescription): 
sendSDP(sessionDescription); 

}, function 0 { /失败 时 调用 的 回调 函数 
console.log(" 创 建 Answer 失败 "); 

} mediaConstraints): 





} 


在 sendAnswer() 函 数 中 ， 使 用 RTCPeerConnection 对 象 的 createAnswer0 方 法 创建 Answer (被 呼 | 
叫 方 的 SDP)。 同 样 ， 在 createAnswer0 方 法 中 可 以 使 用 三 个 参数 : | 
回 ”第 一 个 参数 为 创建 Answer 成 功 时 调用 的 回调 函数 ， 该 函数 使 用 一 个 参数 ， 参 数值 为 创建 | 
Answer 成 功 时 被 自动 创建 的 RTCSessionDescription 对 象 ， 此 处 该 对 象 代表 被 呼叫 方 的 本 地 | 
会 话 描述 。 

第 二 个 参数 为 可 选 参数 , 为 创建 Answer 失败 时 调用 的 回调 函数 。 该 回调 函数 具有 一 个 参数 ， 

参数 值 为 创建 Answer 失败 时 抛 出 的 错误 对 象 。 

回 ”第 三 个 参数 值 为 可 选 参数 ， 参 数值 为 一 个 MediaConstraints 对 象 。 

第 9 步 ， 在 创建 Answer 成 功 时 调用 的 回调 函数 中 ， 同 样 使 用 RTCPeerConnection 对 象 的 
setLocalDescription() 方 法 在 被 呼叫 方 保存 本 地 会 话 描述 ， 然 后 调用 sendSDP0 方 法 将 本 地 会 话 描述 发 | 
送 给 呼叫 方 ， 在 本 例 中 将 其 显示 在 “发 送 的 SDP 字符 串 :” 文 本 框 中 ， 由 用 户 复制 到 另 一 个 浏览 器 标 | 
签 页 内 的 “接收 的 SDP 字符 串 :” 文 本 框 中 。 | 

第 10 步 ， 在 呼叫 方 粘贴 SDP， 单 击 “ 验 证 SDP” 按 钮 后 ， 依 序 调用 onSDPO 函 数 、onAnswer() | 
函数 和 setAnswer0 函 数 。 在 setAnswer0 函 数 中 调用 RTCPeerConnection 对 象 的 setRemoteDescription0 | 
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方法 保存 Answer， 代 码 如 下 所 示 : 


| 

| 

| 

| function onSDPO { 
| Var text = textToReceiveSDP value:; 
| var evt = JSON.parse(text): 

| 让 (peerConnection) { 


onAnswWer(evt): 
Note J etse 





这 样 就 完成 了 呼叫 方 与 被 呼叫 方 的 SDP 信息 交换 过 程 。 
| 13.2.6 “ICE 交换 


| onOffer(evb: 

| } 

| textToReceiveSDPvalue =""; 

| } 

| function onAnswer(evt) { 

| console.log(" 接 收 到 Answer..…") 

| console.log(evt); 

| setAnswer(evt): 

| 国 梧 

| function setAnswer(evt) { 

| if(! peerConnection) { 

| console.error('peerConnection 不 存在 !"); 
| return; 

| } 

| peerConnection.setRemoteDescription(new RTCSessionDescription(evt)); 
| } 

| 

| 

| 


本 节 重 点 分 析 前 面 示例 的 ICE 交换 过 程 。 
第 1 步 ， 首 先 查看 prepareNewConnection0) 函 数 。 代 码 如 下 所 示 : 


function prepareNewConnectionO { 
Var pc config = {"iceServers":[]}:; 
Var peer = null:; 
ty{ 
peer =new webkitRTCPeerConnection(pe_config); 

} 
catch (e) { 

console.log(" 建 立 连 接 失 败 ， 错 误 : "+ e.message): 


peer.onicecandidate = function (evD { 
if (evt.candidate) { 
console.log(evt.candidate): 
sendCandidate( {type: "candidate". 
sdpMLineIndex: evt.candidate.sdpMLineIndex. 
sdpMid: evt.candidate.sdpMid. 


| 

| 

| 

| 

| 

| 

| 

| 

| } 

| // 发 送 所 有 ICE 候选 者 给 对 方 
| 

| 

| 

| candidate: evt.candidate.candidate}): 
| 

| 
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console.log(' 添 加 本 地 视频 流 ..…"); 
peer.addStream(localStream): 


Ss 


peer.addEventListener("addstream". onRemoteStreamAdded, false): 
peer.addEventListener("removestream". onRemoteStreamRemoved. false): 
// 当 接收 到 远程 视频 流 时 ， 使 用 本 地 video 元 素 进行 显示 
function onRemoteStreamAdded(event) { 

console.log("Added remote stream"): 

remoteVideo.src = window.URL .createObjectURL(event.stream); 


} 
// 当 远程 结束 通信 时 ， 取 消 本 地 


Video 元 素 中 的 显示 


function onRemoteStreamRemoved(event) { 


console.log(" 移 除 远程 视频 流 "); 
remoteVideo.src = ""; 

中 

return Peer 


下 





第 2 步 ,在 创建 RTCPeerConnection 对 象 之 后 , 当 ICE 发 现 网 络 候选 者 ,将 触发 RTCPeerConnection | 





对 象 的 icecandidate 事件 。 在 事件 回 











在 本 例 中 为 将 候选 者 信息 显示 在 “发 送 的 ICE 字符 串 :” 文 本 框 中 , 复制 到 另 一 个 浏览 器 标签 页 内 “ 接 


调 函数 中 ， 调 用 sendCandidate() 函 数 将 候选 者 信息 发 送 给 对 方 ， 


收 的 ICE 字符 串 :” 文 本 框 中 以 实现 手动 发 送 过 程 ， 代 码 如 下 所 示 : 


function sendCandidate(candidate) { 


Var text = JSON .stringify(candidate); 


console.log(text): 


textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR): 
textForSendICE.scrollTop = textForSendICE.scrollHeight: 


} 





在 另 一 个 浏览 器 标签 页 内 的 “接收 的 ICE 字符 串 :” 文 本 框 中 粘贴 ICE 信息 ， 单 击 “ 验 证 ICE” 


按钮 ， 调 用 onICE0 函 数 。 


第 3 步 , 在 onICEO 函 数 中 将 “接收 的 ICE 字符 串 :” 文本 框 中 的 信息 进行 分 割 ， 


候选 者 信息 ， 再 传递 给 onCandidate() 函 数 ，onICEO 函 数 代码 如 下 所 示 : 


function onICEO { 


var text = textToReceiveICE.value: 


Var alr = text.split(iceSeparator): 
for (vari= 1, len = arr.length: i< 
Var evt = JSON.parse(arr{i]); 
onCandidate(evt); 
} 
textToReceiveICE.value ="": 
由 


第 4 步 ， 在 onCandidate0 函 数 中 调用 RTCPeerConnection 对 象 的 addIceCandidate0 方 法 ， 用 于 将 


len:itH{ 


每 一 个 ICE 候选 者 信息 传递 给 WebRTC 连接 对 象 。 代 码 如 下 所 示 : 


function onCandidate(evt) { 


-个 个 地 取出 ICE 


Var candidate = new RTCIceCandidate( {sdpMLineIndex:evt.sdpMLineIndex. sdpMid:evt.sdpMid., candidate: | 


evt.candidate}): 


console.log(" 接 收 到 Candidate..…") 
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| console.log(candidate): 
| peerConnection.addIceCandidate(candidate): 
| 


} 
全 7 在 呼叫 方 与 被 呼叫 方 均 将 每 一 个 ICE 候选 者 信息 都 传递 给 WebRTC 连接 对 象 之 后 ， 双 方 的 ICE 
一 一 | 信息 交换 完毕 。 当 双方 的 SDP 信息 及 ICE 信息 都 交换 完毕 后 ， 即 可 开始 进行 WebRTC 通信 。 
第 5 步 ， 在 开始 通信 之 后 ， 为 了 让 对 方 能 够 接收 从 本 地 摄像 头 中 采集 的 视频 数据 流 ， 需 要 使 用 
| WebRTC 连接 对 象 的 addStream0 方 法 ， 代 码 如 下 所 示 : 
| 
| peer.addStream(localStream); 


第 6 步 ， 当 接收 到 从 对 方 发 送 过 来 的 视频 流 时 ， 触 发 WebRTC 连接 对 象 的 addstream 事件 。 可 以 
| 在 事件 回调 函数 中 定义 在 video 元 素 中 播放 这 些 视频 流 ， 代 码 如 下 所 示 : 
peer.addEventListener("addstream", onRemoteStreamAdded, 

// 当 接收 到 远程 视频 流 时 ， 使 用 本 地 video 元 素 进行 显示 

function onRemoteStreamAdded(event) { 

console.log("Added remote stream"): 

remoteVideo.src = window.URL .createObjectURL(event.stream): 














第 7 步 ， 可 以 使 用 WebRTC 连接 对 象 的 close0 方 法 关闭 连接 ， 代 码 如 下 所 示 : 
peerConnection.close(); 


| 第 8 步 ， 当 远程 视频 流 变 得 不 再 可 用 时 ， 将 触发 WebRTC 连接 对 象 的 removestream 事件 ， 可 以 
| 在 事件 回调 函数 中 定义 不 再 使 用 本 地 video 元 素 播放 这 些 视频 流 ， 代 码 如 下 所 示 : 
peer.addEventListener("removestream", onRemoteStreamRemoved., false): 

// 当 远程 结束 通信 时 ， 取 消 本 地 video 元 素 中 的 显示 

function onRemoteStreamRemoved(event) { 

console.log(" 移 除 远程 视频 流 "); 


TemoteVideo.src = ""; 











| 
| 
| 
| 
| } 
| 
| 
| 
| 





13.3 在 线 练 习 


使 用 WebRTC 让 浏览 器 实时 获取 和 交换 视频 、 音 频 和 数据 。 
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跨 窗口 操作 


HITMLS 新 增 了 多 个 路 窗口 操作 的 API， 如 桌面 通知 、 页 面 切换 可 见 、 爹 异 显 示 等 。 使 
用 这 些 扩 展 接口 ， 能 够 帮助 用 户 摆脱 JavaScript 脚本 只 能 在 当前 页 面 发 挥 作用 的 限制 ， 增 强 


Web 应 用 的 适应 能 力 。 


【 学 习 重 点 】 

MH 正确 使 用 通知 API。 

加 ”基本 使 用 Page Visibility API。 
WI 了 解 Fullscreen API 的 用 法 。 














GR A 


14.1 通知 API 


HTMLS5 通知 API (Notification API) 可 以 允许 在 某 个 事件 发 生 时 在 桌面 向 用 户 显示 通知 信息 ， 生 
成 的 消息 不 依附 于 某 个 标签 页 ， 仅 仅 依附 于 浏览 器 。 


| 14.1.1 Notification API 基础 


在 传统 网 页 设计 中 ， 消 息 推送 是 基于 页 面 存在 的 。 例 如 ， 当 用 户 使 用 京东 进行 购物 的 时 候 ， 就 无 
法 知道 微 博 有 消息 推送 过 来 ， 而 只 有 当 用 户 把 当前 页 面 切 换 到 微 博 网 时 ， 才 知道 有 消息 推送 。 
HTMLS5 通知 API 设计 策略 : 无 论 用 户 访问 哪个 页 面 ， 只 要 有 消息 ， 都 能 推送 给 用 户 看 到 。 因 此 ， 
HTML5 通知 生成 的 消息 不 依附 于 某 个 页 面 ， 仅 仅 依附 于 浏览 器 。 
总 提示 : Chrome 6+、Opera 23+、Firefox 24+ 和 Safari 5.2+ 版 本 浏览 器 均 支持 通知 API。 
生成 通知 的 实现 步骤 如 下 : 
第 1 步 ， 先 检查 浏览 器 是 否 支持 Notification API。 
【示例 1】 检查 浏览 器 是 否 支持 通知 API， 可 以 通过 window 对 象 的 Notification 属性 判断 。 
if(window.Notification){ 
alert(" 浏 览 器 支持 通知 API"); 线 上 阅读 视频 讲解 示例 效果 在 线 练习 
jelse{ 
alert ("浏览 器 不 支持 通知 API"); 
} 
第 2 步 ， 检 查 浏 览 器 的 通知 权限 ， 是 否 允 许 通知 。 如 果 权 限 不 够 ， 则 获取 浏览 器 的 通知 权限 。 
为 了 让 浏览 器 可 以 显示 通知 ， 首 先 要 请 求 让 浏览 器 显示 通知 的 权限 。 在 通知 API 中 ， 使 用 
Notification 对 象 的 requestPermission0 方 法 即 可 ， 代 码 如 下 所 示 : 
windowNotification requestPermission0O: 
当 JavaScript 向 用 户 申请 让 浏览 器 显示 通知 的 权限 时 ， 浏 览 器 显示 如 图 14.1 所 示 的 提示 框 。 


htpy/iocalhost/testlhtml Xx 


了 筷 locdhost/ 加 器 C |Q Bec 


localhost 
国 Et 网 的 浊 天 号 7 
浪 7 乌 


x 


号 时 后 收 下 却 (A) 及 
| we | 
莹 不 手 作 
图 14.1 在 Firefox 中 申请 通知 权限 
< 人 注意 : requestPemmission() 方 法 只 在 用 户 显 式 触发 的 事件 ， 如 单 击 按钮 、 单 击 鼠 标 左 键 或 按 下 键盘 
上 某 个 键 中 有 效 。 
【示例 2】 用 户 可 以 通过 Notification 对 象 的 permission 属性 来 判断 用 户 是 否 给 予 让 浏览 器 显示 
通知 的 权限 ， 代 码 如 下 所 示 。 
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这 windowNotification{ 
if (window.Notification.permission =— "granted") { 
// 获 得 权限 


} 
else 这 windowNotification permission 一 "default"){ 
windowNotification requestPermission0: /申请 权限 





} 
Jelse{ | 
alert ("浏览 器 不 支持 通知 API: | 

ny | 

Notification 对 象 的 permission 属性 包含 3 个 值 ， 说 明 如 下 : | 

default: 用 户 处 理 结果 未 知 ， 因 此 浏览 器 将 视 为 用 户 拒绝 弹出 通知 栏 。 

denied: 用 户 拒绝 弹出 通知 栏 。 

granted: 用 户 允 许 弹 出 通知 栏 。 

第 3 步 ， 创 建 消息 通知 。 在 获得 让 浏览 器 显示 通知 的 权限 之 后 ， 就 可 以 通过 创建 Notification 对 
象 来 显示 通知 ， 代 码 如 下 所 示 : 

Var notification = new Notification(title,options) 


该 构造 函数 包含 两 个 参数 : 第 一 个 参数 设置 通知 的 标题 第 二 个 参数 为 一 个 对 象 ， 用 于 指定 创建 
通知 时 可 以 使 用 的 各 种 选项 ， 该 对 象 可 使 用 的 属性 及 属性 值 如 下 所 示 
dir: 设置 通知 中 的 文字 方向 ， 包 括 lt (从 左 向 右 ) 或 已 ( 从 右 向 左 ) ， 默 认 值 为 ltr。 
lang: 设置 通知 所 使 用 的 语言 ， 属 性 值 必须 为 一 个 有 效 的 BCP 47 语言 标识 
body: 设置 通知 中 所 显示 的 内 容 。 
tag: 设置 通知 的 ID， 即 唯一 标识 符 ， 以 区 别 于 其 他 通知 ， 开 发 者 通过 tag 标识 符 获取 、 修 
改 或 删除 该 通知 。 
回 icon: 设置 通知 图 标 ， 为 图 片 的 URL 地 址 。 
【示例 3】 下 面 代码 生成 一 个 通知 ， 定 义 通知 标题 、 通 知 图 标 和 通知 内 容 ， 如 图 14.2 所 示 。 


图 加 回回 


<scrip> 
这 windowNotification){ 
if (window.Notification.permission 一 "granted") { 
Var notification = new Notification(' 通 知 标题 ', {icon:"images/notice.jpg'.body:' 通 知 内 容 ')); 
} 
else if(window.Notification.permission 一 "default"){ 
window Notification TequestPemrmission0: | 





} 
jelse{ 

alert ("浏览 器 不 支持 通知 APT"): 
上 
</script> 
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第 4 步 ， 监 测 和 管理 通知 。 
Notification 对 象 提供 下 面 4 个 事件 类 型 ， 用 于 监测 通知 。 
show: 当 通 知 被 显示 时 触发 。 
全 | close: 当 通 知 被 关闭 时 触发 。 
| click: 当 通 知 被 单 击 时 触发 。 
error: 当 通 知 引发 错误 时 触发 。 
| 另外 ， 使 用 Notification 对 象 的 close0 方 法 可 以 关闭 通知 。 
| 【示例 4】 下 面 示例 演示 了 如 何 使 用 Notification 对 象 事件 监测 通知 。 
| 这 windowNotification){ 
让 (windowNotification pemmission =— "granted") { 
varnotification = new Notification(' 通 知 标题 ， {icon:"images/notice.jpg',body:' 通 知 内 容 '}); 
notification.onshow = functionO{ 
console.log(" 显 示 通 知 "); 


























} 
notification.onclose = functionO{ 
console.log(" 关 闭 通知 "); 
} 
notification.onclick = functionO{ 
console.log(" 单 击 通 知 "); 
} 
notification.onerror = function(Erron) { 
console.log(" 通 知 出 错 "); 
} 
} 
else if(window.Notification.permission 一 "default"){ 
window.Notification.requestPermission(); 
} 
}else{ 
alert ("浏览 器 不 支持 通知 APT"); 
} 


14.1.2 案例: 设计 桌面 通知 
下 面 示例 设计 当 用 户 单 击 页 面 中 的 控制 按钮 后 ， 可 以 开启 桌面 通知 ， 显 示 最 新 微 博 消息 ， 演 示 效 


口 ecaihosnessthtml x 


C [© locahostiest 


ETT 





图 14.3 手动 开启 桌面 通知 
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示例 主要 代码 如 下 所 示 : 

<input type="button" value=" 开 启 桌 面 通知 " onclick="showNotice0:"> 

<script> 

function showNoticeO{ | 全 

Notification.requestPermission(function(status){ | 一 一 
/lstatus 默认 值 'default 等 同 于 拒绝 ，'denied 意味 着 用 户 不 想 要 通知 | 
/1granted' 意味 着 用 户 同意 启用 通知 
这 "eranted" {= status) | 
var notify = new Notification(" 澎 洲 新 闻 ",{ 
dir:'auto', 








tagsds', // 实 例 化 的 notification 的 id 
/licon 支持 ico、png、jpg、jpeg 格 式 
icon:"images/pb.jpg'// 通 知 的 缩 略 图 

body:【 保 定 通报 “饭局 后 驾车 撞 死 人 副 局 长 ”调查 情况 : 远 超 醉 驾 标准 】12 月 19 日 晚 , 河 | 


} 
D); 
} 
</script> 


14.1.3 案例: 关闭 通知 


下 面 示例 设计 当 用 户 单 击 页 面 中 的 “显示 通知 ”按钮 后 , 可 以 开启 桌面 通知 , 显示 最 新 通知 消息 ，; 视频 讲解 
如 果 单 击 “ 关 闭 通 知 ” 按 钮 ， 可 以 关闭 通知 ， 演 示 效 果 如 图 14.4 所 示 。 











D leahosnesthm x Ce 


C | © localhost/test].htm 





下 未 通 知 | [ 关 亲 明知 





图 14.4 使 用 脚本 关闭 通知 


示例 主要 代码 如 下 所 示 : 

<script> 

Varnotice: 

function createNotification0{ 

if (window.Notification.permission 一 "granted") { 

notice=new Notification(' 通 知 标题 ' 
{icon:' images/pb.jpg '.body:" 通 知 内 容 ')): 
notice.onshow = function() {console.log(' 通 知 被 显示 "):}: 


"7s 
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notice.onclose = function() {console.log(' 通 知 被 关闭 "):}: 
} 

和 window.Notification .requestPermission(); 
铺盖 


} 
function closeNotificationO{ 
notice.close(); 
} 
</script> 
</head> 


<body> 
<button onclick="createNotification0"> 显 示 通 知 </button> 
<button onclick="closeNotification0"> 关 闭 通知 </button> 


14.1.4 案例 : 设计 多 条 通知 
下 面 示例 设计 当 页 面 显 示 时 ， 在 桌面 批量 显示 10 条 通知 ， 演 示 效果 如 图 14.5 所 示 。 





D localhocfie him x 


© | © localhost/test] html 








14.5 显示 多 条 通知 
示例 主要 代码 如 下 所 示 : 


| <scripP 
| if (window.Notification.permission 一 "granted") { 
| for(var i=0:i<10:i++) 
var ”notice =new Notification( 通 知 标题 ".{ 
icon:'downAIrrow.gif 
tag:MyID' +i. 
body:" 第 + i+ 条 通知 内 容 ， 
六: 





四 

| else 这 windowNotification permission — "default"){ 
| windowNotification requestPermissionO: 

| 

| 

| </script> 
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14.2 页 面 可 见 API 





页 面 可 见 API 可 以 实现 : 当 与 页 面 进行 交互 时 ， 如 果 页 面 最 小 化 ， 或 者 隐藏 在 其 他 标签 页 后 面 ， | 
那么 页 面 中 有 些 功 能 是 可 以 暂停 工作 ， 如 轮 询 服务 器 或 者 某 些 动画 效果 。 


14.2.1 Page Visibility 基础 | 





HTMLS 新 增 Page Visibility API， 它 表示 页 面 可 见 API。 应 用 Page Visibility API 之 后 ， 在 浏览 
窗口 中 只 有 当前 激活 的 页 面 处 于 工作 状态 ， 其 他 隐藏 页 面 将 暂停 工作 ， 避 免 不 必 要 的 计算 ， 耗 费 系统 
资源 ， 干 扰 用 户 浏览 。 


次 提示 : 目前 Firefox 1+、Chrome 14+、 下 10+、 Opera 12+、Safari 7+ 版 本 浏览 器 支持 Page Visibility | 
API. 


【示例 1】 在 HTML5 之 前 ， 用 户 可 以 监听 focus 事件 。 如 果 当 前 窗口 获取 焦点 ， 那 么 可 以 认为 
用 户 在 与 该 页 面 交互 ， 如 果 失 去 焦点 〈blur)， 那 么 可 以 认为 用 户 停止 与 该 页 面 交互 。 
/当前 窗口 得 到 焦点 
window.onfocus = functiongO { 
// 开 始 动画 
// 开 始 Ajax 轮 询 等 


上 
/当前 窗口 失去 焦点 
window.onblur = function0O { 
// 停 止 动画 
// 停 止 Ajax 轮 询 等 
上 
上 面 设 计 方 法 略 显 简单 ， 如 果 用 户 一 边 打 开 浏 览 器 看 视频 ， 一 边 在 另 一 个 窗口 中 工作 。 很 显然 ， 
焦点 集中 在 工作 窗口 中 ， 那 么 浏览 器 就 失去 了 焦点 ， 而 无 法 正常 浏览 。Page Visibility API 能 够 有 效 帮 
助 用 户 完全 判断 ， 避 免 不 必 要 的 尴 这 。 
Page Visibility 是 一 个 简单 的 API， 它 包含 两 个 属性 和 一 个 事件 。 
document.hidden: 布尔 值 ， 表 示 页 面 是 否 隐藏 。 


容 提示 : 页 面 隐藏 包括 : 页 面 在 后 台 标签 页 中 ， 或 者 浏览 器 最 小 化 显示 ， 但 是 页 面 被 其 他 软件 窗口 
遮盖 并 不 算 隐 藏 ， 如 打开 的 Word 让 住 了 浏览 器 。 


document.visibilityState: 表示 当前 页 面 的 可 见 性 状态 ， 包 括 4 个 可 能 状态 值 ， 说 明 如 下 。 
> ”hidden: 页 面 在 后 台 标签 页 中 ， 或 者 浏览 器 最 小 化 。 
> ”visible: 页 面 在 前 台 标签 页 中 。 
> ”prerender: 页 面 在 屏幕 外 执行 预 泻 染 处 理 ，documenthidden 的 值 为 true。 
> ”unloaded: 页 面 正在 从 内 存 中 外 载 。 
visibilitychange 事件 : 当 文档 从 可 见 变 为 不 可 见 , 或 者 从 不 可 见 变 为 可 见 时 , 将 触发 该 事件 。 
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| 【示例 2】 通 过 监听 visibilitychange 事件 ， 当 该 事件 触发 时 ， 获 取 document.hidden 的 值 ， 根 据 
| 该 值 进行 页 面 处 理 。 
| document.addEventListener('visibilitychange'. functionO{ 
| var isHidden = documenthidden: 
| iisHidden) { 
// 动 画 停止 
// 服 务 器 轮 询 停止 
}else { 
// 动 画 开始 
// 服 务 器 轮 询 
1 





D; 
【示例 3】 使 用 onfocus/onblur 事件 可 以 兼容 低 版 本 正 浏览 器 。 


(fonctionO { 

var hidden = "hidden"; 
// 标 准 用 法 
if (hidden in document) 

document.addEventListener("visibilitychange", onchange): 
else if ((hidden = "mozHidden") in document) 

document.addEventListener("mozvisibilitychange", onchange): 
else if ((hidden = "webkitHidden") in document) 

document.addEventListener("webkitvisibilitychange", onchange): 
else if ((hidden = "msHidden") in document) 

document.addEventListener("msvisibilitychange", onchange); 
// 兼 容 IE9- 
else if ("onfocusin" in document) 

document.onfocusin = document.onfocusout = onchange: 
/兼容 其 他 浏览 器 
else 

window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange; 
function onchange (evt) { 

Var v= "visible". h= "hidden". 

evtMap={ 
focus:v focusin:V pageshow:V blur:h. focusout:h. pagehide:h 
}; 
evt = evt || window.event: 
if (evt.type in evtMap) 
document.body.className = evtMap[evttype]: 
else 
document.body.className = this[hidden] ? "hidden" : "visible": 


} 
1/ 设置 初始 状态 仅 当 浏览 器 支持 页 面 可 见 性 API) 
这 document[hidden] ! 一 undefined ) 
onchange({type: document[hidden] ? "blur" : "focus"}): 
DO; 
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这 提示 : Page Visibility API 适 用 场景 如 下 : | 
加 ”Web 应 用 拥有 幻灯 片 式 的 连续 播放 功能 ， 当 页 面 处 于 不 可 见 状 态 时 ,图 片 停止 播放 ， | 
当 页 面 变 为 可 见 状态 时 ， 图 片 继续 播放 。 | 
回 。 实时 显示 服务 器 端 信息 的 应 用 中 ， 当 页 面 处 于 不 可 见 状态 时 ， 停 止 定期 向 服务 器 端 | 
请 求 数据 的 处 理 , 当 页 面 变 为 可 见 状态 时 ,继续 执行 定期 向 服务 器 端 请 求 数据 的 处 理 。 | 
加 ”具有 播放 视频 功能 的 应 用 中 ， 当 页 面 处 于 不 可 见 状 态 时 ， 暂 停 播放 视频 ， 当 页 面 变 
为 可 见 状态 时 ， 继 续 播放 视频 。 | 


14.2.2 案例: 设计 视频 页 面 
本 示例 使 用 Page Visibility 设计 当 页 面 被 隐藏 或 最 小 化 显示 时 ， 将 暂停 被 播放 的 视频 ， 同 时 在 标 | 


题 栏 中 显示 当前 暂停 播放 的 时 间 ， 当 用 户 切换 到 当前 页 面 时 ， 再 重新 播放 ， 标 题 栏 又 动态 显示 播放 的 | 
进度 ， 演 示 效 果 如 图 14.6 所 示 。 





(a) 动态 播放 中 (b) 暂停 播放 中 示例 效果 


图 14.6 在 视频 页 面 应 用 Page Visibility 技术 
示例 主要 代码 如 下 所 示 : 


<video id="videoElement" autoplay controls width="480" height="270"> 

<source src="video/chrome.webm" type="video/webm" /> 

<source src="video/chrome.ogv" type="video/ogg" /> 

<source src="video/chrome.mp4" type="video/mp4: codecs='avc1.42E01E. mp4a.40.2" /> 
</video> 





<script> | 
/记录 变量 ， 监 测 视频 是 否 暂停 | 
// 视 频 设置 为 自动 播放 | 
sessionStorage.isPaused = "false": | 
// 设 置 隐藏 属性 和 可 见 性 变化 事件 的 名 称 | 
var hidden. visibilityChange: 

if (typeof document.hidden ! 一 "undefined") { 

hidden = "hidden"; 


VisibilityChange = "visibilitychange": 

} else if (typeof documentmozHidden ! 一 "undefined") { 
hidden = "mozHidden": 
VisibilityChange = "mozvisibilitychange": 

} else if (typeof document.msHidden !— "undefined") { 
hidden = "msHidden": 
visibilityChange = "msvisibilitychange": 

} else if (typeof document.webkitHidden !— "undefined") { 
hidden = "webkitHidden": 
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VisibilityChange = "webkitvisibilitychange": 


Var VideoElement = document.getElementById("videoElement"): 
// 如 果 该 页 面 是 隐藏 的 ， 则 暂停 视频 


全 六 | // 如 果 显 示 页 面 ， 则 播放 视频 
NA function handleVisibilityChangeO { 
| if(document[hidden]) { 
VideoElement.pause(): 
| } else if (sessionStorage.isPaused ! 一 "true") { 
| videoElement.playO: 


} 


} 
// 如 果 浏 览 器 不 支持 addEventListener 或 者 页 面 可 见 性 API， 则 进行 警告 
if (typeof document.addEventListener 一 "undefined" | 
typeof hidden —= "undefined") { 
alert(" 本 例 需 要 一 个 浏览 器 ， 如 谷歌 浏览 器 ， 支 持 页 面 可 见 性 API。"); 
}else{ 
// 处 理 页 面 可 见 性 变化 
document.addEventListener(visibilityChange, handleVisibilityChange, false): 
// 当 视频 停顿 
VideoElement.addEventListener("pause", functionO{ 
让 (ldocument[hidden]) { 
/如 果 现 在 不 是 因为 页 面 隐藏 而 暂停 ， 则 设置 isPaused 为 真 
sessionStorage.isPaused = "true": 
} 
}., false); 
// 当 视频 播放 ， 设 置 isPaused 状态 
VideoElement.addEventListener("play", functionO{ 
sessionStorage.isPaused = "false": 
}, false): 
// 以 当前 视频 时 间 设 置 文 档 的 标题 
VideoElementaddEventListener("timeupdate". functionO{ 
document.title = Math.floor(videoElement.currentTime) + " second(s)"; 
}, false): 
</script> 


14.2.3 案例: 设计 登录 页 面 


| 本 示例 设计 当 用 户 在 新 页 面 登录 成 功 之 后 , 在 其 他 页 面 都 能 够 自动 呈现 登录 状态 , 示例 演示 效果 
| 如 图 14.7 所 示 。 








| 
| | 
| 人 (a) 动态 显示 登录 状态 Cb) 登录 页 面 
| 
图 14.7 在 网 站 登录 中 应 用 Page Visibility 技术 
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示例 主要 代码 如 下 所 示 : 
设计 首页 (testl .html) 


<script src="pageVisibility.js"></script> 
<p id="loginInfo"></p> 
<script> 
(fonction0 { 
if (typeof pageVisibility.hidden ! 一 "undefined") { 
Var eleLoginInfo = document.querySelector("#loginInfo"): 
var funLoginInfo = function| { 
Varusemame = localStorage.username || sessionStorage.username; 
if (username) { 
cleLoginInfo.innerHTML = ' 欢 迎 回来 ，<strong>' + usermame + '</strong>'; 
sessionStorage.username = username: 
}else{ 
cleLoginInfo.innerHTML = ' 尚 未 登录 ， 请 <a target=”blank" href="login.html"> 登 录 </a>'; 
bh 


pageVisibility.visibilitychange(function() { 
if (!this.hidden) funLoginInfo():; 





D: 

fonLoginInfo0: 

// 页 面 关闭 清除 localStorage 

window.addEventListener("unload", function|O { 
localStorage.removeltem("username"): 


D 


}else{ 
alert(" 浏 览 器 不 支持 Page Visibility API"); 
} 
D0; 
</script> 
设计 登录 页 面 (login.html) 
<form id="loginForm" action="" method="post"> 
<p> 用 户 名 : <input type="text" name="usemame" required /></p> 
<p> 密 码 : <input type="password" name="password" required /></p> 
<p><input type="submit" /> </p> 
</form> 
<script> 
(functionO { 
if (typeof window.screenX —— "number") { 
Var eleLoginForm = document.querySelector("#loginForm"); 
eleLoginForm.addEventListener("submit". function(e) { 
localStorage.username = document.querySelector("input[name="username’]").value: 
alert(" 登 录 成 功 ! 可 以 返回 前 面 页 面 。"); 
this.reset(): 
epreventDefaultO: 
}. false): 
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14.3.1 Fullscreen API 基础 


HTML5 新 增 一 个 Fullscreen API， 可 以 设计 全 屏 显示 模式 应 用 。 用 户 可 以 通过 DOM 对 象 的 根 节 
| 点 (document.documentElement) 或 某 个 元 素 的 requestFullscreen() 方 法 请 求 Fullscreen API。 

目前 ，Firefox 10+、Chrome 16+、Safari 5.1+、Opera 12+、IE 11+ 版 本 浏览 器 支持 Fullscreen API。 
【示例 1】 下 面 函数 launchFullscreen0 可 以 根据 传 入 的 元 素 ， 让 该 元 素 全 屏 显示 。 


function launchFullscreen(element) { 

这 elementrequestFullscreen) { 
element.requestFullscreen(): 

} else if(element.mozRequestFullScreen) { 
element.mozRequestFullScreen(): 

} else if(element.msRequestFullscreen){ 
element.msRequestFullscreen(): 

} else if(element.webkitRequestFullscreen) { 
element.webkitRequestFullScreen(|): 

} 


} 


”A 注意 : 最 新 版 本 的 浏览 器 都 支持 Fullscreen API， 但 是 在 使 用 时 需要 加 上 前 级 ， 如 mozRequest FullScreen。 
| 使 用 的 时 候 ， 可 以 针对 整个 网 页 ， 也 可 以 针对 某 个 网 页 元 素 。 
| launchFullscreen(document.documentElement): 
| launchFullscreen(document.getElementById("videoElement")): 
| 【示例 2】 使 用 exitFullscreen0) 或 CancelFullScreen0 方 法 可 以 取消 全 屏 显示 。 
| function exitFullscreen() { 

| if (document.exitFullscreen) { 

| document.exitFullscreen(): 

| } else if (document.msExitFullscreen) { 
| documentmsExitFullscreenO: 

| } else if (document.mozCancelFullScreen) { 

| document.mozCancelFullScreen(: 

| } else if (document.webkitExitFullscreen) { 

| documentwebkitExitFullscreenO: 

| } 

| 上 

| exitFullscreen(): 

| 

| FullScreen API 还 定义 了 两 个 属性 ， 简 单 说 明 如 下 : 

| document.fullscreenElement: 返回 正 处 于 全 屏 状 态 的 网 页 元 素 。 
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document fullscreenEnabled: 返回 一 个 布尔 值 ， 表 示 当 前 是 否 处 于 全 屏 状 态 。 
【示例 3】 下 面 代码 判断 当前 页 面 是 否 全 屏 显 示 ， 并 获取 当前 全 屏 显示 的 元 素 。 
var fullscreenEnabled = 
document.fullscreenEnabled || 
document.mozFullScreenEnabled | 
document.webkitFullscreenEnabled || 
document.msFullscreenEnabled: 
var fullscreenElement = 
document.fullscreenElement | | 
document mozFullScreenElement || | 
document.webkitFullscreenElement: 


在 全 屏 状态 下 ,大 多 数 浏览 器 的 CSS 支持 “:foll-sereen” 伪 类 ,而 焉 11+ 支持 “:fullscreen” 伪 类 。| 
使 用 这 个 伪 类 ， 可 以 对 全 屏 状态 设置 单独 的 CSS 样式 。 
【示例 4】 下 面 样式 代码 设计 全 屏 模式 下 的 页 面 样式 。 
<style type="text/css"> 
:-Webkit-full-screen { /* 通用 样式 */} 
:-moz-full-screen { /* 通用 样式 */} 
:-ms-fullscreen { /* 通用 样式 */} 




















:full-screen { 
让 特殊 样式 */ 
/* 通用 样式 */ | 
} | 
:fullscreen { | 
大 特殊 样式 */ | 
* 通用 样式 */ | 
bl | 
:-Webkit-full-screen video {/* 更 深层 次 的 元 素 */ | 
Width: 100%: 
height: 100%; 
} 
</style> 


当 进 入 或 退出 全 屏 模式 时 ， 会 触发 fallsereenchange 事件 。 利 用 该 事件 可 以 监测 全 屏 状 态 的 改变 ，| 
以 便 及 时 做 出 各 种 页 面 响应 。 | 
【示例 5】 在 事件 处 理 函 数 中 , 可 以 通过 DOM 对 象 的 fullscreen 属性 值 来 判断 页 面 或 元 素 是 否 处 | 
于 全 屏 显 示 状 态 。 


document.addEventListener("fullscreenchange". function | { 
fullscreenState.innerHTML =(document fnllscreen) ? "全 屏 显示 " : " 非 全 屏 显示 "; 
btnFullScreen.value=(document.fullscreen) ? "页 面 非 全 屏 显示 ": "页 面 全 屏 显示 ": 

}. false): 

document.addEventListener("mozfullscreenchange". function O { 
fullscreenState.innerHTML =(documentmozFullScreen) ? "全 屏 显示 " : " 非 全 屏 显示 ": 
btnFullScreen.value=(documentmozFullScreen) ? "页 面 非 全 屏 显示 ": "页 面 全 屏 显 示 ": 

}. false): 

document.addEventListener("webkitfullscreenchange". function O { 
fullscreenState.innerHTML =(document.webkitIsFullScreen) ? "全 屏 显示 " : " 非 全 屏 显示 ":; 
btmnFullScreen.value=(document.webkitIsFullScreen)? "页 面 非 全 屏 显示 ": "页 面 全 屏 显 示 "; 

}. false): 
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在 上 面 代码 中 ， 根 据 不 同 的 浏览 器 添加 浏览 器 前 级 ， 并 将 fullscreen 修改 为 FullScreen， 例 如 
mozFullScreen， 在 Chrome、Opera 或 Safari 浏览 器 中 需 将 fnllscreen 改 为 webkitlsFullScreen。 


| 14.3.2 案例: 设计 全 屏 显 示 


本 示例 设计 在 页 面 中 显示 一 个 “页 面 全 屏 显 示 ” 按 钮 与 一 个 div 元 素 ，div 元 素 中 显示 “ 非 全 屏 
显示 ”文字 。 单 击 “ 页 面 全 屏 显示 ”按钮 后 按钮 文字 变 为 “页 面 非 全 屏 显 示 ”，div 元 素 中 显示 “全 屏 
司 | 显示 ”文字 ， 页 面 变 为 全 屏 显示 状态 ， 页 面 背景 色 变 为 红色 。 单 击 “ 页 面 非 全 屏 显示 ”按钮 后 按钮 文 
总 | 字 变 为 “页 面 全 屏 显示 ”，div 元 素 中 显示 “ 非 全 屏 显 示 ” 文 字 ， 页 面 恢复 为 非 全 屏 显示 状态 ， 页 面 背 

| 景色 恢复 为 白色 。 演 示 效 果 如 图 14.8 所 示 。 
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(a) 非 全 屏 状态 (b) 全 屏 状态 
图 14.8 ”设计 页 面 全 屏 显 示 





示例 效果 
示例 主要 代码 如 下 所 示 : 


<style type="text/css"> 

html:-moz-fiull-screen {background: red:} 

html:-webkit-full-screen {background: red:} 

html:fullscreen {background: red:} 

</style> 

<input type="button" id="btnFullScreen" value=" 页 面 全 屏 显示 " onclick="toggleFullScreenQ:"> 

<div style="width:100%:" id="fullscreenState"> 非 全 屏 显示 </div> 

<script type="text/javascript"> 

Var docElm = document.documentElement: 

var fullscreenState=document.getElementById("fullscreenState"): 

var btnFullScreen=document.getElementById("btnFullScreen"): 

fullscreenState.style.height=docElm.clientHeight+"px": 

document.addEventListener("fullscreenchange". function | { 
fullscreenState.innerHTML =(document fullscreen) ? "全 屏 显示 " : " 非 全 屏 显 示 ": 
btnFullScreen.value=(document.fullscreen) ? "页 面 非 全 屏 显 示 ": "页 面 全 屏 显示 "; 

}., false); 

document.addEventListener("mozfullscreenchange". function O { 
fullscreenState.innerHTML =(document.mozFullScreen) ? "全 屏 显示 " : " 非 全屏 显 示 ": 
btnFullScreen.value=(documentmozFullScreen) ? "页 面 非 全 屏 显示 ": "页 面 全 屏 显 示 ":; 

}. false): 

document.addEventListener("webkitfullscreenchange". function O { 
fullscreenState.innerHTML =(document.webkitIsFullScreen) ?" 全 屏 显示 " : " 非 全屏 显 示 ": 
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bmFullScreen.value=(document.webkitIsFullScreen) ?" 页 面 非 全 屏 显 示 ": "页 面 全 屏 显示 "; 
}. false): 
function toggleFullScreenO{ 
if(bmFullScreen.value 一 "页 面 全 屏 显 示 "){ 
if (docElm requestFullscreen) { 
docElm .requestFullscreen(); 





} 

else if (docElm.mozRequestFullScreen) { 
docElm mozRequestFullScreenO: 

} 

else if (docElm.webkitRequestFullScreen) { 
docElm webkitRequestFullScreen0: 

} 

} else{ 

if (document.exitFullscreen) { 

document.exitFullscreen(): 


else 站 (document.mozCancelFullScreen) { // 如 果 为 Firefox 浏览 器 
document.mozCancelFullScreen(): 
else if (document.webkitCancelFullScreen) {// 如 果 为 Chrome、Opera 或 Safari 浏览 器 
document.webkitCancelFullScreen(): 
} 
} 
4 
</script> 


14.3.3 案例: 设计 全 屏 播放 


本 示例 设计 当 按 Enter 键 时 ， 视 频 会 自动 全 屏 播放 ， 再 次 按 Enter 键 或 者 Esc 键 ， 则 退出 全 屏 播 
放 模式 ， 演 示 效 果 如 图 14.9 所 示 。 
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© © localhosn 


注意 ， 技 回 熙 要 切换 全 屏 模式 





(a) 非 全 屏 状态 (b) 全 屏 状 态 
图 14.9 ”设计 视频 全 屏 播 放 
示例 主要 代码 如 下 所 示 : 
<style type="text/css"> 
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SS 
:-Webkit-full-screen #videoElement {/* 使 视频 拉 伸 以 填充 在 WebKit 的 屏幕 */ 
width: 100%:; 
height: 100%: 
} 
</style> 
<p> 注 意 ; 按 回 车 键 切 换 全 屏 模式 </p> 
<video id="videoElement" autoplay controls width="480" height="270"> 
<source src="video/chrome.webm" type="video/webm" /> 
<source src="video/chrome.ogv" type= "video/ogg" /> 
<source strc="video/chrome.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2" /> 
</video> 
<script> 
Var videoElement = document.getElementById("videoElement"); 
function toggleFullScreenO { 
if (!document.mozFullScreen && !document.webkitFullScreen) { 
if (videoElement.mozRequestFullScreen) { 
videoElement.mozRequestFullScreen(): 
}else { 
videoElement.webkitRequestFullScreen(Element.ALLOW_ KEYBOARD INPUT): 
}else { 
if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(): 
}else { 
document.webkitCancelFullScreen(): 
} 
} 
} 
document.addEventListener("keydown", function(e) { 
if (ekeyCode — 13) { 
toggleFullScreenO: 
} 
}, false); 
</script> 


14.4 在 线 练 习 


练习 使 用 Web Notifications 新 特性 。 
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拖 放 操作 


HTMLS 拖 放 API 使 Web 应 用 能 够 在 浏览 器 中 使 用 拖 放 功能 - 例如 ， 用 户 可 以 使 用 鼠标 
选择 可 拖 动 的 元 素 ， 将 元 素 抑 动 到 可 放置 的 元 素 内 ， 并 通过 释放 鼠标 按钮 来 放置 这 些 元 素 。 
对 于 Web 应 用 程序 来 说 ， 用 户 可 以 自 定义 能 金成 为 可 抱 鬼 的 元 素 类 型 、 可 拖 鬼 元 素 产生 的 
反馈 类 型 ， 以 及 可 放置 的 元 素 。 


【学 习 重 点 】 
MH 正确 使 用 拖 放 API。 
WI 应 用 拖 放 API。 


mR yo A wm 天 芋 对 ( 拔 训 本 全 反 ) 


15.1 艳 放 API 基础 


全 让 
| 在 传统 网 页 设计 中 ， 需 要 借助 JavaScript 的 mousedown、mousemove、mouseup 事件 ， 通 过 大 量 
区 (5 一 脚 本 来 实现 拖 放 操作 。HTMLS5 拖 放 API 降低 了 网 页 对 象 拖 放 的 编程 难度 。 本 节 将 详细 介绍 拖 放 API 
| 
| 的 基本 用 法 。 


15.1.1 拖 放 功能 实现 


拖 放 API 包含 两 部 分 : 拖 忠 (Drag) 和 释放 (Drop)， 拖 电 指 的 是 鼠标 点 按 源 对 象 后 一 直 移动 对 
象 不 松手 ， 一 旦 松手 即 释放 了 。 
读者 在 学 习 之 前 ， 需 要 了 解 两 个 重要 概念 : 
源 对 象 ， 指 鼠标 点 按 的 一 个 事物 ， 如 一 张 图 片 、 一 个 DIV、 一 段 文本 等 。 
目标 对 象 : 指 拖 动 源 对 象 后 移动 到 一 块 区 域 ， 源 对 象 可 以 进入 这 个 区 域 ， 可 以 在 这 个 区 域 上 
方 悬 停 (未 松手 ) ， 可 以 释放 源 对 象 ， 将 其 放置 目标 对 象 内 〈 已 松手 ) ， 也 可 以 悬 停 后 离开 
该 区 域 。 
浏览 器 支持 情况 :下 9+、Firefox、Opera 12+、Chrome 和 Safari 5 +。 另 外 ， 在 Safari 5.1.2 中 
不 支持 拖 放 。 
在 HIML5 中 ， 实 现 拖 放 操作 的 步骤 如 下 : 
第 1 步 ， 设 置 源 对 象 的 draggable 属性 ， 设 置 属 性 值 为 tue (draggable="true")， 这 样 就 可 以 启动 
拖 放 功能 。 


这 提示 : img 和 a 元 素 默认 开启 了 拖 放 功 能 ， 但 必须 设置 href. 


第 2 步 , 根据 HTML5 拖 放 API 定义 事件 类 型 ， 编 写 与 拖 放 有 关 的 事件 处 理 函 数 。 拖 放 API 相关 
事件 说 明 如 表 15.1 所 示 。 





视频 讲解 








表 15.1 拖 放 事件 




































拖 放 的 对 象 元 素 


从 表 15.1 可 以 看 到 ， 被 拖 动 的 源 对 象 可 以 触发 的 事件 : 

回 dragstart: 源 对 象 开 始 被 拖 动 。 

| drag: 源 对 象 被 拖 动 过 程 中 ， 即 鼠标 可 能 在 移动 ， 也 可 能 未 移动 。 
| 回 dragend: 源 对 象 被 拖 动 结束 。 

| 拖 动 源 对 象 进 入 目标 对 象 ， 在 目标 对 象 上 可 以 触发 的 事件 : 


拖 放 操作 结束 





dragend 


| dragstart 被 拖 放 的 元 素 开始 拖 放 操作 
| drag 被 拖 放 的 元 素 拖 放 过 程 中 

| dragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 内 
| dragover | _ 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 
| dragleave | 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 

| drop | 拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 

I 

| 

| 
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dragenter: 目标 对 象 被 源 对 象 拖 动 着 进入 。 
dragover: 目标 对 象 被 源 对 象 拖 动 着 悬 停 在 上 方 。 
dragleave: 拖 动 着 源 对 象 离开 了 目标 对 象 。 
drop: 拖 动 着 源 对 象 在 目标 对 象 上 方 释放 /松手 。 | 

【 示例】 下面 示例 在 页 面 中 插入 一 个 <div id="drag"> 标 签 ， 设 置 draggable="true"， 启 动 该 元 素 的 | 
拖 放 功 能 。 同 时 在 页 面 中 插入 一 个 <div id="target"> 标 签 ， 设 计 为 目标 对 象 。 本 例 设 计 当 每 次 拖 放 <div 
id="drag"> 标 签到 目标 对 象 <div id="target"> 标 签 中 时 ， 将 在 该 元 素 中 追加 一 次 提示 信息 ， 演 示 效 果 如 
图 15.1 所 示 。 


因 办 办 加 


<script type="text/javascript"> 
function initO{ 
Var source = document.getElementById("drag"); 
Var dest = document.getElementById("target"): 
source.addEventListener("dragstart". function(ev) { / (1) 拖 放 开始 
/向 dataTransfer 对 象 追加 数据 
Var dt = ev.dataTransfer: 
dt.effectAllowed = 'all'; 
//(2) 拖 动 元 素 为 dt.setData("text/plain", this.id); 
dt.setData("text/plain", " 拖 入 源 对 象 "); 


}, false):; 

dest.addEventListener("dragend", function(ev) { / (3) dragend: 拖 放 结 束 
ev.preventDefault|):; // 不 执行 默认 处 理 ， 拒 绝 被 拖 放 

}, false): 

dest.addEventListener("drop", function(ev) { / (4) drop: 被 拖 放 
var dt = ev.dataTransfer: /从 DataTransfer 对 象 那里 取得 数据 
Var text = dt.getData("text/plain"); 
dest.innerHTML += "<p>" + text + "</p>"; 
ev.preventDefault(); / (5) 不 执行 默认 处 理 ， 拒 绝 被 拖 放 
ev.stopPropagation(): // 停 止 事 件 传播 

}, false); 


} 

// (6) 设置 不 执行 默认 动作 ， 拒 绝 被 拖 放 

document.ondragover = function(e) {e.preventDefault():}: 

document.ondrop = function(e) {e.preventDefaultO:}: 

</script> 

<style> 

#drag { width 100px: height: 100px: background-color: #93FB40: border-radius: 12px: text-align:center: 
line-height:100px: color:#F423CC: } 

#target { width: 200px: height: 200px: border: 1px dashed gray: margin: -100px 12px 12px: float:right: } 

#target hl{ text-align:center: color:#F423CC: margin:6px 0: font-size:16px: } 

</style> 


<body onload="initO"> 
<!-- (7) 把 draggable 属性 设 为 true --> 
<div id="drag" draggable="true"> 源 对 象 </div> 
<div id="target"> 
<hl> 目 标 对 象 <hl> 
</div> 
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图 15.1 拖 放 对 象 


【代码 解析 】 
第 1 步 ， 开 始 拖 动 时 ， 触 发 dragstart 事件 ， 使 用 setData0 方 法 把 要 拖 动 的 数据 存 入 DataTransfer 
对 象 。 
容 提示 : DataTransfer 对 象 专门 用 来 存放 拖 放 操作 时 要 传递 的 数据 ， 可 以 通过 拖 放 事件 对 象 的 
dataTransfer 属性 进行 访问 。DataTransfer 对 象 包含 两 个 重要 方法 : setData0 和 getData()。 
其 中 setData0 方 法 用 于 向 DataTransfer 对 象 传递 值 ， 而 getData() 方 法 能 够 从 DataTransfer 
对 象 读 取 值 。 


setData() 方 法 的 第 一 个 参数 为 携带 数据 的 数据 类 型 ， 第 二 个 参数 为 要 携带 的 数据 。 第 一 个 参数 表 
示 MIME 类 型 的 字符 串 ， 现 在 支持 拖 动 处 理 的 MIME 的 类 型 包括 以 下 几 种 。 

"text/plain ": 文本 文字 。 

"text/html ": HTML 文字 。 

"text/xml ": XML 文字 。 

"text/uri-list ": URL 列表 ， 每 个 URL 为 一 行 。 

如 果 把 下 面 代码 : 

dt.setData("text/plain", " 拖 入 源 对 象 "); 

改 为 : 

dt.setData("text/plain", this.id): 

把 被 拖 动 元 素 的 id 作为 参数 ， 浏 览 器 在 使 用 getData0 方 法 读 取 数 据 时 会 自动 读 取 该 元 素 中 的 数 
据 ， 所 以 携带 的 数据 就 是 被 拖 动 元 素 中 的 数据 。 

第 2 步 ,针对 拖 放 的 目标 对 象 , 应 该 在 dragend 或 dragover 事件 内 调用 事件 对 象 的 preventDefault() 
方法 阻止 默认 行为 。 

dest.addEventListener("dragend". function(ev) { 

ev.preventDefaultO: 

}, false): 

第 3 步 ， 目 标 元 素 接 收 到 被 拖 放 的 元 素 后 ， 执 行 getData0 方 法 从 DataTransfer 对 象 获取 数据 。 
getData() 方 法 包含 一 个 参数 ， 参 数 为 setData0 方 法 中 指定 的 数据 类 型 ， 如 "text/plain"。 

第 4 步 ， 要 实现 拖 放 过 程 ， 还 应 在 目标 元 素 的 drop 事件 中 关闭 默认 处 理 ， 否 则 目标 元 素 不 能 接 
收 被 拖 放 的 元 素 。 
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dest.addEventListener("drop", function(ev) { 
evpreventDefault0: 
evstopPropagation(): /停止 事件 传播 
}, false); | 
第 5 步 ， 要 实现 拖 放 过 程 ， 还 必须 设置 整个 页 面 为 不 执行 默认 处 理 ， 和 否则 拖 放 处 理 也 不 能 实现 。 | 
因为 页 面 是 先 于 其 他 元 素 接受 拖 放 的 ， 如 果 页 面 上 拒绝 拖 放 ,那么 页 面 上 其 他 元 素 就 都 不 能 接受 拖 
放 了 。 | 
document.ondragover = fonction(e)fe.preventDefaultO:}: 
document.ondrop = function(e) {e.preventDefaultO:;}:; 


15.1.2 DataTransfer 对 象 


在 15.1.1 节 示例 中 提 及 DataTransfer 对 象 ， 本 节 将 介绍 DataTransfer 对 象 的 属性 和 方法 ， 具 体 说 | 
明 如 表 15.2 所 示 。 





表 15.2 DataTransfer 对 象 的 属性 和 方法 











属性 /方法 “| 类 型 说 阴 | 
i 属性 表示 拖 放 操作 的 视觉 效果 ， 人 允许 设置 值 包括 : none、copy、link、move。 该 效 | 
Ee 果 必须 在 effectAllowed 属性 指定 的 视觉 效果 范围 内 | 
ed 属性 指定 当 元 素 被 拖 放 时 所 允许 的 视觉 效果 。 可 以 指定 的 值 为 : none、copy、 | 
Pe copyLink、 copyMove、 link、 linkMove、move、all、uninitialized | 
| 

types 属性 存 入 数据 的 类 型 ， 字 符 串 的 伪 数 组 | 
ey 方法 清除 DataTransfer 对 象 中 存放 的 数据 。 包含 一 个 参数 ,设置 要 清除 数据 的 类 型 ， | 
如 果 省 略 参 数 ， 则 清除 全 部 数据 | 

setData0 方法 向 DataTransfer 对 象 存 入 数据 ， 用 法 参考 15.1.1 节 介绍 | 
getData() 方法 从 DataTransfer 对 象 读 取 数 据 ， 用 法 参考 15.1.1 节 介 绍 | 
sp 方法 ii 部 分 浏览 器 支持 用 canvas 等 其 他 元 素来 设置 ， 具体 说 明 参 考 下 | 


正确 使 用 DataTransfer 对 象 的 属性 和 方法 ， 可 以 实现 定制 拖 放 图 标 ， 或 者 定义 只 支持 特定 拖 放 ， 
如 复制 、 移 动 等 ， 甚 至 可 以 实现 更 复杂 的 拖 放 操作 。 

dropEffect 和 effectAllowed 属性 结合 起 来 可 以 设置 拖 放 时 的 视觉 效果 。effectAllowed 属性 表示 当 | 
一 个 元 素 被 拖 动 时 所 允许 的 视觉 效果 ， 一 般 在 dragstart 事件 中 定义 ， 可 以 设置 的 属性 值 如 表 15.3 | 
所 示 。 


表 15.3 effectAllowed 属性 值 说 明 


属 性 值 说 阴 
copy | 人 允许 将 被 拖 动 元 素 复制 到 拖 动 的 目标 元 素 中 


move 允许 将 被 拖 动 元 素 移动 到 拖 动 的 目标 元 素 中 
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续 表 
属 性 什 说 明 

link 通过 拖 放 操作 ， 被 拖 动 元 素 会 链接 到 拖 动 的 目标 元 素 上 

1 in | 被 拖 动 元 素 被 复制 或 链接 到 拖 动 的 目标 元 素 中 。 根 据 拖 动 的 目标 元 素来 决定 执行 复制 操 

SI 作 ， 还 是 链接 操作 

owMov。 | 被 拖 动 元 素 被 复制 或 移动 到 拖 动 的 目标 元 素 中 。 根 据 拖 动 的 目标 元 素来 决定 执行 复制 操 

oy 作 ， 还 是 移动 操作 

NVS | 被 拖 动 元 素 被 链接 或 移动 到 拖 动 的 目标 元 素 中 。 根 据 拖 动 的 目标 元 素来 决定 执行 链接 操 
作 ， 还 是 移动 操作 

all 允许 执行 所 有 拖 动 操作 ， 包 括 复制 、 移 动 与 链接 操作 
none 不 允许 执行 任何 拖 动 操作 

本 不 指定 effectAllowed 属性 值 。 将 执行 浏览 器 中 默认 允许 的 拖 动 操作 。 但 是 该 操作 不 能 通 
mnta ze | 过 effectAllowed 属性 值 来 获取 





DataTransfer 对 象 的 dropEffect 属性 表示 实际 拖 放 时 的 视觉 效果 ， 一 般 在 dragover 事件 中 指定 ， 


允许 设置 的 值 为 none、copy、link、move。dropEffect 属性 所 表示 的 实际 视觉 效果 必须 与 effectAllowed 
属性 值 所 表示 的 允许 操作 相 匹 配 ， 规 则 如 下 所 示 。 


如 果 effectAllowed 属性 设置 为 none， 则 不 允许 拖 放 元 素 。 

如 果 dropEffect 属性 设置 为 none， 则 不 允许 被 拖 放 到 目标 元 素 中 。 

如 果 effectAllowed 属性 设置 为 all 或 不 设置 ， 则 dropEffect 属性 允许 被 设置 为 任何 值 。 

如 果 effectAllowed 属性 设置 为 具体 操作 ， 而 dropEffect 属性 也 设置 了 具体 视觉 效果 ， 则 
dropEffect 属性 值 必须 与 effectAllowed 属性 值 相 匹配 ， 否 则 不 允许 将 被 拖 放 元 素 拖 放 到 目标 
元 素 中 。 

【示例 1】 下 面 代码 演示 了 effectAllowed 和 dropEffect 属性 如 何 配合 使 用 ， 完 整 代码 可 参考 上 节 


回回 加 加 


示例 。 


source.addEventListener("dragstart", function(ev) { 
Var dt = ev.dataTransfer: 
dt.effectAllowed = 'copy’: 

}, false); 

dest.addEventListener("dragover". function(ev) { 
Var dt = ev.dataTransfer: 
dt.dropEffect = 'copy"; 

}. false): 


DataTransfer 对 象 的 setDragImage0 方 法 包含 三 个 参数 : 第 一 个 参数 设置 拖 放 图 标的 图 标 元 素 , 第 





| 三 个 参数 设置 拖 放 图 标 离 鼠 标 指针 的 x 轴 方 向 的 位 移 量 , 第 三 个 参数 设置 拖 放 图 标 离 鼠 标 指针 的 y 轴 
| 方向 的 位 移 量 。 


【示例 2】 下 面 代码 演示 了 调用 setDragImage() 方 法 定义 拖 放 图 标 ， 演 示 效 果 如 图 15.2 所 示 。 
<scripttype="text/javascript"> 
var dragIcon=document.createElement(img'): /创建 图 标 元 素 
dragIcon_.src='images/11.png': // 设 置 图 标 来 源 


Var source = document.getElementById("drag"): 
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! 
Var dest = document.getElementById("target"): ! 
source.addEventListener("dragstart". function(ev) { | 
var dt = ev.dataTransfer: | 
dt.setDragImage(dragIcon. -10. -10): | 
dt.effectAllowed = 'copy: | 
dt.setData("text/plain", this.id); | 


> te 

dest.addEventListener("dragover", function(ev) { Note 
var dt = ev.dataTransfer; 
dt.dropEffect = 'copy'; 

}. false); 

dest.addEventListener("dragend", function(ev) { 
ev.preventDefault|: 

}., false); 

dest.addEventListener("drop", function(ev) { 
var dt = ev.dataTransfer; 
Var text = dt.getData("text/plain"): 
dest.innerHTML += "<p>" + text + "</p>"; 
ev.preventDefaultO: 
ev.stopPropagation(): 

}, false); | 








} 

document.ondragover = function(e) {e.preventDefault(:}:; 

document.ondrop = function(e) {e.preventDefault|:}: 

</script> 

<style> 

#drag { width: 100px: height: 100px: background-color: #93FB40:; border-radius: 12px: text-align:center: 
line-height:100px; color:#F423CC; } 

#target { width: 200px: height: 200px: border: 1px dashed gray: margin: 12px:} 

</style> 


<body onload="initO"> 
<img id="drag" src="images/1.png" width="314" height="314" alt=""/> 
<div id="target"></div> 


D localhocthest2html x Ng 
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图 15.2 定义 拖 放 图 标 效果 
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152 案例 实战 


下 面 结合 几 个 案例 练习 拖 放 API 的 使 用 。 
15.2.1 设计 垃圾 箱 


[localhosVtesti. neml x N= 
© [© locamosvresti hm! 
到 于 3 


列表 a 


-列表 二 袖 入 进 了 垃 久 演 
“列表 2 祖 轧 进 了 所 条 


【操作 步 又】 
第 1 步 ， 新 建 HIML5 文档 ， 保 存 为 testl.html。 
第 2 步 ， 构 建 HIML 结构 ， 设 计 一 个 简单 的 列表 容器 ， 同 时 模拟 一 个 垃圾 箱 容器 (<div 
| class="dustbin"> )，<div class="dragremind"> 为 拖 电 信息 提示 框 。 
<div class="dustbin"><br> 
垃 <br> 
圾 <br> 
箱 </div> 
<div class="dragbox"> 
| <div class="draglist" draggable="true"> 列 表 1</div> 
| <div class="draglist" draggable="true"> 列 表 2</div> 
| 
| 


| 
| 
| 示例 效果 图 15.3 设计 垃圾 箱 演示 效果 
| 
| 
| 
| 


<div class="draglist" draggable="true"> 列 表 3</div> 
<div class="draglist" draggable="true"> 列 表 4</div> 
<div class="draglist" draggable="true"> 列 表 5</div> 
| <div class="draglist" draggable="true"> 列 表 6</div> 
</div> 

<div class="dragremind"></div> 


第 3 步 ， 在 文档 头 部 插入 <style> 标 签 ， 定 义 内 部 样式 表 ， 设 计 列 表 样 式 和 垃圾 箱 样式 。 


body { font-size: 8496: } 
.dustbin { width: 100px: height: 260px: line-height: 1.4: background-color gray: font-size: 36px: font-family: " 微 
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软 雅 黑 ", "Yahei Mono"; text-align: center: text-shadow: -1px -1px #bbb: float: left: } | 
.dragbox { width: 500px: padding-left: 20px: float: left: } | 
.draglist { padding: 10px: margin-bottom: SpX: border: 2px dashed #ccc: backeround-color: #eee: cursor: move; } | 
.draglist:hover { border-color #cadSeb; background-color: #f0f3f9; } | 
.dragremind { padding-top: 2em: clear: both: } | 
第 4 步 ， 在 页 面 底部 (<body> 标 签 下 面 ) 插入 <scripf> 标 签 ， 定 义 一 个 JavaScript 代码 块 。 输 入 下 | 
面 代 码 定义 一 个 选择 器 函数 。 
Var$= function(selector) { 
f(!selector) { return [J: } 
var arrEle = []; 
让 (document.querySelectorAlD { 
arTEle = document.querySelectorAll(selector): 
}else{ 
Var OAll = document.getElementsByTagName("div"). 1All = oAll.length:; 
if(AD{ 
vari=0: 
for (i; i<IAll; i+=1) { 
if(/M\/.test(selector)) { 
if (oAll[il].className = 一 selector.replace(".", "")) { 
arrEle.push(oAII[i]): 





} 
} else if(/^#/.test(selector)) { 
if (oAll[i].id = 一 selectorreplace("#", "")) { 
arrEle.push(oAlI[)): 
} 


} 

Teturn arTEle: 

上 

第 5 步 ,获取 页 面 中 所 有 列表 项 目 ,然后 使 用 for 语句 逐个 为 它们 绑 定 selectstart、dragstart、dragend | 
事件 处 理 函 数 。 | 


Var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lIDrags = eleDrags.length, eleRemind = 
S$(".dragremind")[0]. eleDrag = null: 
for (var i=0; i<lDrags: i+=1) { 
eleDrags[i].onselectstart = function|O { 
Ietum false: 
上 
eleDrags[i].ondragstart = function(ev) { 
ev.dataTransfer.effectAllowed = "move": 
ev.dataTransfer.setData("text". ev.target.innerHTMLIL): 
ev.dataTransfer.setDragImage(ev.target. 0. 0): 
eleDrag = ev.target: 


| 
| 
| 
| 
| 
! 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
return true: | 
| 

人 
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| cleDrags[i].ondragend = function(ev) { 
| ev.dataTransfer.clearData("text"): 
| 


eleDrag = mull; 
伪 生 | 洲 
| 
第 6 步 ， 为 垃圾 箱 容器 <div class="dustbin"> 绑 定 dragover、dragenter、drop 事件 ， 设 计 拖 电 到 垃 


| 圾 箱 上 时 ,高 亮 显示 垃圾 箱 提示 文字 ; 同时 当 拖 入 垃圾 箱 时 ， 删 除 列表 框 中 对 应 列表 项 目 ， 当 释放 鼠 
| 标 左 键 时 ， 在 底部 <div class="dragremind"> 容 器 总 显示 删除 列表 项 目的 提示 信息 。 


eleDustbin.ondragover = function(ev) { 
ev.preventDefault(); 
Tetum true; 

上 

eleDustbin.ondragenter = function(ev) { 
this.style.color = "##fffffF': 


Tetum true; 
上 
eleDustbin.ondrop = function(ev) { 
if (eleDrag) { 
eleRemind.innerHTML += '<strong>" + eleDrag.innerHTML + "</strong> 被 扔 进 了 垃圾 箱 <br>'; 
eleDrag.parentNode.removeChild(eleDrag); 
} 
this.style.color = "#000000":; 
Tetum false: 
上 


| 15.2.2 设计 接纳 箱 


| 

| 

本 例 设 计 一 个 简单 的 方形 盒子 , 允许 用 户 通过 鼠标 拖 忠 方形 盒子 , 并 允许 把 它 拖 入 不 同 的 容器 中 ， 
| 演示 效果 如 图 15.4 所 示 。 
| 

| 

| 

| 
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| 图 15.4 设计 接纳 箱 
具体 操作 步 台 请 扫 码 学 习 。 
| 
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15.2.3” 拖 选 对 象 


本 例 设计 一 个 可 视 化 拖 选 操作 ， 人 允许 用 户 通过 鼠标 拖 忠 照片 ， 并 人 允许 把 它 拖 入 不 同 目 标 容器 中 ， | 


演示 效果 如 图 15.5 所 示 。 


© |@ localhosvtest .mml 


一 照片 正在 被 拖 动 一 


备 选 相册 己 选 照片 


两 政 网 竖 


图 15.5 ” 拖 选 操作 演示 效果 





具体 操作 步 又 请 扫 码 学 习 。 
15.2.4 可视化 删除 


本 例 设计 一 个 文档 元 素 删除 操作 ， 人 允许 用 户 通过 鼠标 拖 上 忠 页 面 底 部 的 图 片 ,并 允许 把 它 拖 入 不 同 
垃圾 桶 中 删除 ， 演 示 效 果 如 图 15.6 所 示 。 


TCRTT 


© [© locahosesr] nm 


拖 动 飞机 到 垃圾 桶 后 从 DOM 树 中 删除 元 素 


“pe Si 








图 15.6 可 视 化 删除 对 象 


具体 代码 解析 请 扫 码 学 习 。 


15.3 在 线 练 


hy) 


使 用 API 进行 拖 忠 行为 及 相应 处 理 。 
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异步 交互 


XMLHttpRequest 是 一 个 异步 交互 API, 提供 了 在 客户 端 与 服务 器 之 间 数 据 通信 的 功能 ， 
并 且 不 会 刷新 页 面 。2014 年 11 月 W3C 正式 发 布 XMLHttpRequest Level 2 标准 规范 ， 新 增 
了 很 多 实用 功能 ， 极 大 地 推动 了 异步 交互 在 JavaScript 中 的 应 用 。 

权威 参 者 : http://www.w3.org/TR/XMLHttpRequest2/ 





权威 参 . 
【 学 习 重 点 】 
WI 使 用 responseType 和 response 属性 。 
MH 使 用 XMLHttpRequest 发 送 将 殊 类 型 数据 。 
MH ”使 用 XMLHttpRequest 跨 域 请 求 。 
WI 跟踪 文件 上 传 进度 。 
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16.1 XMLHttpRequest 2 基础 


老 版 本 的 XMLHttpRequest 插件 存在 很 多 缺陷 : 

只 支持 文本 数据 的 传送 ， 无 法 用 来 读 取 和 上 传 二 进 制 文 件 。 
加 ”传送 和 接收 数据 时 ， 没 有 进度 信息 ， 只 能 提示 有 没有 完成 。 
回 受到 同 域 限制 ， 只 能 向 同一 域名 的 服务 器 请 求 数据 。 | 
XMLHttpRequest 2 做 出 了 大 幅 改进 ， 简 单 说 明 如 下 : 
可 以 设置 HTTP 请 求 的 时 限 。 

可 以 使 用 FormData 对 象 管理 表单 数据 。 

可 以 上 传 文件 。 

可 以 请 求 不 同 域名 下 的 数据 ( 跨 域 请 求 )。 

可 以 获取 服务 器 端的 二 进 制 数 据 。 

可 以 获得 数据 传输 的 进度 信息 。 


.1 请 求 时 限 

XMLHttpRequest 2 为 XMLHttpRequest 对 象 新 增 timeout 属性 ， 使 用 该 属性 可 以 设置 HTTP 请 求 
时 限 。 

xhrtimeout = 3000: 

上 面 语句 将 异步 请 求 的 最 长 等 待 时 间 设 为 3000 毫秒 。 超 过 时 限 ， 就 自动 停止 HTTP 请 求 。 

与 之 配套 的 还 有 一 个 timeout 事件 ， 用 来 指定 回调 函数 。 


xhr.ontimeout = function(event){ 
alert( 请 求 超时 ! "); 





加 回回 罗 图 加 


16. 


ae 


} 


16.1.2 ”FormData 数据 对 象 
XMLHttpRequest 2 新 增 FormData 对 象 ， 使 用 它 可 以 处 理 表单 数据 。 使 用 方法 如 下 : | 
第 1 步 ， 新 建 FormData 对 象 。 | 
Var formData = new FormData(): | 
第 2 步 ， 为 FormData 对 象 添加 表单 项 。 


formDataappend(usemame' ' 张 三 ): 
formData.append('id', 123456): 


第 3 步 ， 直 接 传 送 FormData 对 象 。 这 与 提交 网 页 表单 的 效果 完全 一 样 。 
xhr.send(formData); 

第 4 步 ，FormData 对 象 也 可 以 用 来 获取 网 页 表单 的 值 。 

var form = document getElementById(myfomy): 
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Var formData = new FormData(form): 
formData.append('secret', '123456"): // 添 加 一 个 表单 项 
Xhropen(POST'` form.action); 

xhr.send(formData): 


| 新 版 XMLHttpRequest 对 象 不 仅 可 以 发 送 文本 信息 ， 还 可 以 上 传 文件 。XMLHttpRequest 的 sendO 
| 方法 可 以 发 送 字符 串 、Document 对 象 、 表 单数 据 、Blob 对 象 、 文 件 以 及 ArrayBuffer 对 象 。 
【示例 】 设 计 一 个 “选择 文件 ”的 表单 元 素 (input[type="file"])， 将 它 装 入 FormData 对 象 。 
var formData = new FormData0: 
for (var i= 0; i< files.length:it+) { 
formData.append('files[]'. files[i]); 


全 A 
16.1.3 上传 文件 


} 
然后 ， 发 送 FormData 对 象 给 服务 器 。 
Xhrsend(formData): 


16.1.4 ” 跨 域 访问 


新 版 本 的 XMLHttpRequest 对 象 ， 可 以 向 不 同 域名 的 服务 器 发 出 HTTP 请 求 。 使 用 跨 域 资源 共享 
的 前 提 是 :浏览 器 必须 支持 这 个 功能 ， 且 服务 器 端 必 须 同意 这 种 跨 域 。 如 果 能 够 满足 上 面 两 个 条 件 ， 
则 代码 的 写法 与 不 跨 域 的 请 求 完 全 一 样 。 

Xhropen(CGET','http://otherserver/and/path/to/script): 


16.1.5 ”响应 不 同类 型 数据 


新 版 本 的 XMLHttpRequest 对 象 新 增 responseType 和 response 属性 。 
responseType: 用 于 指定 服务 器 端 返回 数据 的 数据 类 型 ， 可 用 值 为 text、arraybuffer、blob、 
json 或 document。 如 果 将 属性 值 指定 为 空 字符 串 值 或 不 使 用 该 属性 , 则 该 属性 值 默 认为 text。 
response: 如 果 向 服务 器 端 提交 请 求 成 功 ， 则 返回 响应 的 数据 。 
> ”responseType 为 text 时 ， 则 response 返回 值 为 一 串 字 符 串 。 
TesponseType 为 arraybuffer 时 ， 则 response 返回 值 为 一 个 ArrayBuffer 对 象 。 
responseType 为 blob 时 ， 则 response 返回 值 为 一 个 Blob 对 象 。 
TesponseType 为 json 时 ， 则 response 返回 值 为 一 个 Json 对 象 。 
TesponseType 为 document 时 ， 则 reaponse 返回 值 为 一 个 Document 对 象 。 














vvyvyv 


| 16.1.6 ”接收 二 进 制 数据 


老 版 本 的 XMLHttpRequest 对 象 只 能 从 服务 器 接收 文本 数据 ， 新 版 本 则 可 以 接收 二 进 制 数 据 。 
| 使 用 新 增 的 responseType 属性 ， 可 以 从 服务 器 接收 二 进 制 数据 。 如 果 服 务 器 返回 文本 数据 ， 这 个 
| 属性 的 值 是 text， 这 是 默认 值 。 
| 加 可 以 把 responseType 设 为 blob， 表 示 服 务 器 传 回 的 是 二 进 制 对 象 。 
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Var xhr = new XMLHttpRequestO: 
xhropen(CGET'. /path/to/image.png’): | 
xhr.responseType = "blob': | 
接收 数据 的 时 候 ， 用 浏览 器 自 带 的 Blob 对 象 即 可 。 | 
var blob = new Blob([xhr.response], {type: "image/pneg’}): 





< 儿 注意 : 是 读 取 xhrresponse， 而 不 是 xhrresponseText。 | 
可 以 将 responseType 设 为 arraybuffer， 把 二 进 制 数据 装 在 一 个 数组 里 。 | 
var xhr = new XMLHttpRequestO: 
xhr.open(‘GET', /path/to/image.png’); 
xhr.responseType = "arraybuffer": 
接收 数据 的 时 候 ， 需 要 遍历 这 个 数组 。 
Var arrayBuffer = xhr.response: 
if (arrayBuffer) { 
VarbyteArray = new Uint8Array(arrayBuffer); 
for (var i= 0; i< byteArray.byteLength; i++) { 
/执行 代码 
} 
bh 


16.1.7 ”监测 数据 传输 进度 


新 版 本 的 XMLHttpRequest 对 象 新 增 一 个 progress 事件 ， 用 来 返回 进度 信息 。 它 分 成 上 传 和 下 载 
两 种 情况 。 下 载 的 progress 事件 属于 XMLHttpRequest 对 象 ， 上 传 的 progress 事件 属于 
XMLHttpRequestupload 对 象 。 

第 1 步 ， 先 定义 progress 事件 的 回调 函数 。 

xhr.onprogress = updateProgress: 

xhr.upload.onprogress = updateProgress: 

第 2 步 ， 在 回调 函数 里 面 ， 使 用 这 个 事件 的 一 些 属性 。 














function UpdateProgress(event) { | 
if (event.lengthComputable) { | 

Var percentComplete = event.loaded / event.total: | 

} | 


上 面 的 代码 中 ，eventtotal 是 需要 传输 的 总 字 节 ，eventloaded 是 已 经 传输 的 字 节 。 如 果 | 
event.lengthComputable 不 为 真 ， 则 event.total 等 于 0。 
与 progress 事件 相关 的 ， 还 有 其 他 五 个 事件 ， 可 以 分 别 指定 回调 函数 : 
load: 传输 成 功 完成 。 
abort: 传输 被 用 户 取消 。 
error: 传输 中 出 现 错误 。 
loadstart: 传输 开始 。 
loadEnd: 传输 结束 ， 但 是 不 知道 成 功 还 是 失败 。 





办 办 办 办 
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16.2 案例 实战 


下 面 结合 具体 实例 介绍 XMLHttpRequest 2 的 应 用 。 


| 旋 提示 : 本 节 示 例 以 Windows 操作 系统 +Apache 服务 器 +PHP 开发 语言 组 合 框架 为 基础 进行 演示 说 
明 。 如 果 读 者 的 本 地 系统 没有 搭建 PHP 虚拟 服务 器 ， 建 议 先 搭建 该 庶 拟 环境 之 后 ， 再 详 
细 学 习 本 节 内 容 . 


| 16.2.1 接收 ArrayBuffer 对 象 





| 当 XMLHttpRequest 对 象 的 responseType 属性 设置 为 arraybuffer 时 ， 服 务 器 端 响应 数据 将 是 一 个 
| ArrayBuffer 对 象 。 
| 目前 ，Firefox 8+ 、Opera 11.64+、Chrome 10+、Safari 5+ 和 了 正 10+ 版 本 浏览 器 支持 将 
XMLHttpRequest 对 象 的 responseType 属性 值 指定 为 arraybuffer。 

【示例 】 下 面 示例 设计 在 页 面 中 显示 一 个 “下 载 图 片 ”按钮 和 一 个 “显示 图 片 ”按钮 ， 单 击 “ 下 
| 载 图 片 ”按钮 时 ， 从 服务 器 端 下 载 一 幅 图 片 的 二 进 制 数据 ， 在 得 到 服务 器 端 响应 后 创建 一 个 Blob 对 
| 象 ， 并 将 该 图 片 的 二 进 制 数据 追加 到 Blob 对 象 中 ， 使 用 FileReader 对 象 的 readAsDataURIL() 方 法 将 
| Blob 对 象 中 保存 的 原始 二 进 制 数据 读 取 为 DataURL 格式 的 URL 字符 串 ， 然 后 将 其 保存 在 IndexDB 
| 数据 库 中 。 单 击 “ 显 示 图 片 ”时 ， 从 IndexDB 数据 库 中 读 取 该 图 片 的 DataURL 格式 的 URL 字符 串 ， 


视频 讲解 | 
| 
| 
| 
| 
| 
| 创建 一 个 img 元 素 ， 然 后 将 该 URL 字符 串 设置 为 img 元 素 的 src 属性 值 ， 在 页 面 上 显示 该 图 片 。 
| 
| 
| 
| 
| 
| 
| 
| 





<script> 
window.indexedDB = window.indexedDB || window.webkitIndexedDB | 
window.mozIndexedDB || window.msIndexedDB: 
window.IDBTransaction = window.IDBTransaction || 
window.webkitIDBTransaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange | 
window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || 
window.msIDBCursor: 
Window.URL = window.URL || window.webkitURL: 
var dbName = 'imgDB'; /数据 库 名 
var dbVersion = 20170418: /版 本 号 
Var idb: 
function initO{ 
| var dbConnect = indexedDB.open(dbName, dbVersion): /连接 数据 库 
| dbConnect.onsuccess = function(e){// 连 接 成 功 
| idb =etargetresult /获取 数据 库 
}; 
dbConnect.onerror = function() falert( 数 据 库 连接 失败 ): }: 
| dbConnect.onupgradeneeded = function(e){ 
| idb = e.target.result: 
| Var tx = e.target.transaction: 
| tx.onabort = function(e){ 
alert( 对 象 仓库 创建 失败 ): 
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}; 

var name = "img’; 

Var optionalParameters = { 
keyPath: 'id', 
autoIncrement: true 


二 
var store = idb.createObjectStore(name, optionalParameters): 
alert( 对 象 仓库 创建 成 功 ); 
起 
} 
function downloadPicO{ 
var xhr = new XMLHttpRequestO: 
xhr.open('GET', "images/1.png’, true); 
xhr.responseType = "arraybuffer’; 
xhr.onload = function(e) { 
if (this.status 一 200) { 
var bb = new Blob([thisTesponse]): 
var reader = new FileReader():; 
Teader.readAsDataURL(bb); 
Teaderonload = function(f) { 
var result=document.getElementById("result"); 
// 在 IndexDB 数据 库 中 保存 二 进 制 数据 
var tx = idb.transaction(["img'],"readwrite”): 
tx.oncomplete = function0O {alert( 保 存 数据 成 功 ");} 
tx.onabort = functionO {alert( 保 存 数据 失败 '): } 
Var store = tx.objectStore(img’): 
var value = { img:this.result }; 
store.put(value); 
} 
} 
上 
xXhrsendO: 
} 
function showPicO{ 
var tx = idb.transaction(["img']."readonly"): 
Var store = tx.objectStore(img’): 
Var req = store.get(]): 
req.onsuccess = functionO{ 
这 thisresult 一 undefined){ 
alert(" 没 有 符合 条 件 的 数据 "); 
} else{ 
Var img = document.createElement(img ): 
img.src = thisTesultimg: 
document.body.appendChild(ime): 
} 
} 
req.onerror = functionO{ 
alert(" 获 取 数 据 失败 "); 
} 
} 
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</scrip> 

<body onload="init)"> 

<input type="button" value=" 下 载 图 片 " onclick="downloadPic0"><br/> 

, <input type="button" value=" 显 示 图 片 " onclick="showPic0"><br/> 
于 


Note 在 浏览 器 中 预览 ， 单 击 页 面 中 “下 载 图 片 ” 按钮 ， 脚 本 从 服务 器 端 下 载 图 片 并 将 该 图 片 二 进 制 数 
据 的 DataURL 格式 的 URL 字符 串 保存 在 indexDB 数据 库 中 ,保存 成 功 后 在 弹出 提示 信息 框 中 显示 
“保存 数据 成 功 ” 文 字 ， 如 图 16.1 所 示 。 


| 
| 
| 
| 
口 ecalhost8080/mysi=， # 


© © localhost8080/myshte/test html 


下 吉 国 片 | localhost8080 三 示 : 





[SEN sadm 





图 16.1 下 载 文 件 


| 单 击 “ 显 示 图 片 ”按钮 ， 脚 本 从 indexDB 数据 库 中 读 取 图 片 DataURL 格式 的 URL 字符 串 ， 并 将 
| 其 指定 为 mg 元 素 的 sre 属性 值 ， 在 页 面 中 显示 该 图 片 ， 如 图 16.2 所 示 。 

口 ecelhost6030/mmsit=，X 

CG 轩 IocalhostB08 


| 
| 
| a 
| 





| 
| 
| 【代码 解析 】 
| 第 1 步 , 当 用 户 单 击 “ 下 载 图 片 ” 按 钮 时 , 调用 downloadPic0 函 数 , 在 该 函数 中 , XMLHttpRequest 
对 象 从 服务 器 端 下 载 一 幅 图 片 的 二 进 制 数 据 ， 在 下 载 时 将 该 对 象 的 responseType 属性 值 指定 为 
arraybuffer。 
var xhr = new XMLHttpRequestO: 
xhr.open(GET'. images/1.png'. true): 
| xhr.responseType = 'arraybuffer’: 
| 第 2 步 ， 在 得 到 服务 器 端 响应 后 ， 使 用 该 图 片 的 二 进 制 数 据 创建 一 个 Blob 对 象 。 然 后 创建 一 个 
| FileReader 对 象 ， 并 且 使 用 FileReader 对 象 的 readAsDataURL0O 方 法 将 Blob 对 象 中 保存 的 原始 二 进 制 
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数据 读 取 为 DataURL 格式 的 URL 字符 串 ， 然 后 将 其 保存 在 mdexDB 数据 库 中 。 | 

第 3 步 , 单 击 “ 显 示 图 片 "时 ,从 IndexDB 数据 库 中 读 取 该 图 片 的 DataURL 格式 的 URL 字符 串 ，| 
然后 创建 一 个 用 于 显示 图 片 的 img 元 素 ， 将 该 URL 字符 串 设 置 为 img 元 素 的 src 属性 值 ， 在 该 页 面 | 
上 显示 下 载 的 图 片 。 | 


16.2.2 ”接收 Blob 对 象 


当 XMLHttpRequest 对 象 的 responseType 属性 设置 为 blob 时 , 服务 器 端 响应 数 
据 将 是 一 个 Blob 对 象 。 目 前 ，Firefox 8+、Chrome 19+、Opera 18+ 和 下 10+ 版 本 的 
浏览 器 支持 将 XMLHttpRequest 对 象 的 responseType 属性 值 指定 为 blob。 

【示例 】 以 16.2.1 节 示例 为 基础 ， 直 接 修改 其 中 downloadPic0 函 数 中 的 代码 ， 
设置 xhr.responseType = "blob"， 函 数 代码 如 下 所 示 。 


function downloadPicO{ 
var xhr = new XMLHttpRequestO; 
xhr.open('GET'. ‘images/1.png’. true): 
xhr.responseType = ‘blob’; 
xhr.onload = function(e) { 
if (this.status 一 200) { 
var bb = new Blob([thisresponse]): 
Var reader = new FileReader(): ! 
readerreadAsDataURL(bb): | 
reader.onload = function(f) { | 
var result=document.getElementById("result"): | 
/在 IndexDB 数据 库 中 保存 二 进 制 数据 | 
var tx = idb.transaction(["img’],"readwrite"): 
fx.oncomplete = function( {alert( 保 存 数据 成 功 );} | 
tx.onabort = functionO{alert( 保 存 数据 失败 '): } 
Var store = tx.objectStore('img’): 














var value = { 
img:this.result 

} | 
store.put(value): | 
} | 
} | 
}: | 
xhr.sendO: | 
| 


} 


修改 完毕 后 ， 在 浏览 器 中 预览 ， 当 在 页 面 中 单 击 “ 下 载 图 片 ”按钮 和 “显示 图 片 ”按钮 ， 示 例 演 
示 效 果 与 上 节 示例 的 功能 完全 一 致 。 


16.2.3 ”发 送 字符 串 

为 XMLHttpRequest 对 象 设 置 responseType = 'text， 可 以 向 服务 器 发 送 字 符 串 数据 。 

【示例 】 下 面 示例 设计 在 页 面 中 显示 一 个 文本 框 和 一 个 按钮 ， 在 文本 框 中 输入 字符 串 之 后 ， 单 
页 面 上 的 “发 送 数据 ”按钮 ， 将 使 用 XMLHttpRequest 对 象 的 send0 方 法 将 输入 字符 串 发 送 到 服务 器 | 
端 ， 在 接收 到 服务 器 端 响应 数据 后 ， 将 该 响应 数据 显示 在 页 面 上 ， 演 示 效 果 如 图 16.3 所 示 。 
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图 16.3 发 送 字 符 串 演示 效果 


Var txt=document.getElementById("text1").value: 
var xhr = new XMLHttpRequestO:; 
xXhropen(POST''testphp'. true); 
xhrresponseType = "text'; 
xhr.onload = function(e) { 
if (this.status — 200) { 
document.getElementById("result").innerHTML=this.response; 
} 
}; 
xhr.send(txt): 
} 
</script> 
<form> 
<input type="text" id="text1"><br/> 
<input type="button" value=" 发 送 数据 " onclick="sendText0"> 
</form> 
<output id="result" ></output> 
后 台 页 面 (test.php) 
<?php 
$str =file_get_contents('‘php://input’); 
echo ' 服 务 器 端 接收 数据 : '.$str: 
flushO: 
?> 


16.2.4 发送 表单 数据 


使 用 XMLHttpRequest 对 象 发 送 表 单数 据 时 ， 需 要 创建 一 个 FormData 对 象 。 用 法 如 下 : 


Var form = document.getElementById("forml"): 
Var formData = new FormData(form): 


FormData() 构 造 函 数 包含 一 个 参数 ， 表 示 页 面 中 的 一 个 表单 (form) 元 素 。 
创建 formData 对 象 之 后 ， 把 该 对 象 传递 给 XMLHttpRequest 对 象 的 send0 方 法 即 可 。 用 法 如 下 : 


xhr.send(formData): 
使 用 formData 对 象 的 append0 方 法 可 以 追加 数据 ,这 些 数据 将 在 向 服务 器 端 发 送 数据 时 随 着 用 户 
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在 表单 控件 中 输入 的 数据 一 起 发 送 到 服务 器 端 。append0 方 法 的 用 法 如 下 。 
formData.append('add_data", ' 测 试 ): 。“// 在 发 送 之 前 添加 附加 数据 


该 方法 包含 两 个 参数 : 第 一 个 参数 表示 追加 数据 的 键 名 ， 第 二 个 参数 表示 追加 数据 的 键 值 。 | 
当 formData 对 象 中 包含 附加 数据 时 ,服务 器 端 将 该 数据 的 键 名 视 为 一 个 表单 控件 的 name 属性 值 ， | 
将 该 数据 的 键 值 视 为 该 表单 控件 中 的 数据 。 | 
【示例 】 下 面 示例 在 页 面 中 设计 一 个 表单 , 表单 包含 一 个 用 于 输入 姓名 的 文本 框 和 一 个 用 于 输入 ? 
密码 的 文本 框 ， 以 及 一 个 “发 送 ” 按 钮 。 输 入 姓名 和 密码 ， 单 击 “ 发 送 ”按钮 ，JavaScript 脚本 在 表 | 
单数 据 中 追加 附加 数据 ， 然 后 将 表单 数据 发 送 到 服务 器 端 ， 服 务 器 端 接收 到 表单 数据 后 进行 响应 , 演 | 
示 效 果 如 图 16.4 所 示 。 








图 16.4 发 送 表单 数据 演示 效果 Eee 
前 台 页 面 〈testl.html) 
<script> 
function sendFormO { 
Var form=document.getElementById("form]1"):; 
var formData = new FormData(form): 
formData.append('grade', '3"):; // 在 发 送 之 前 添加 附加 数据 
Var xhr = new XMLHttpRequestO: 
xhr.open('POST,','test.php',true); 
xhr.onload = function(e) { 
if (this.status — 200) { 
document.getElementById("result").innerHTML=this.response: 





}; 
xhr.send(formData); 
} 
</script> 
<form id="forml"> 
用 户 名 : <input type="text" name="name"><br/> 
密码: <input type="password" name="pass"><br/> 
<input type="button" value=" 发 送 " onclick="sendForm():"> 
</form> 
<output id="result" ></output> 
后 台 页 面 (testphp) 
<?php 
$name =$_ POST[mame'] : 
Spass =$ POST[pass] : 
$erade =$ POST['grade] : 
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| echo ' 服 务 器 端 接收 数据 : <br/>'; 

| echo ' 用 户 名 : "$name.'<br/>"; 

| echo 密 ” 码 :'.$pass.'<br/>'; 
echo 等 “级 : '$grade: 


16.2.5 发 送 二 进 制 文件 


使 用 FormData 可 以 向 服务 器 端 发 送 文件 ， 具 体 用 法 : 将 表单 的 enctype 属性 值 设 置 为 
"multipart/form-data"， 然 后 将 需要 上 传 的 文件 作为 附加 数据 添加 到 formData 对 象 中 即 可 。 

【示例 】 本 示例 页 面 中 包含 一 个 文件 控件 和 “发 送 ”按钮 ， 使 用 文件 控件 在 客户 端 选取 一 些 文件 
| 后 ， 单 击 “ 发 送 ” 按 钮 ，JavaSeript 将 选取 的 文件 上 传 到 服务 器 端 ， 服 务 器 端 在 上 传 文件 成 功 后 将 
这 些 文件 的 文件 名 作为 响应 数据 返回 ， 客 户 端 接收 到 响应 数据 后 ， 将 其 显示 在 页 面 中 ,演示 效果 如 
图 16.5 所 示 。 








16.5 ”发 送 文件 演示 效果 


前 台 页 面 (testl.html) 
<script> 
function uploadFileO { 
var formData = new FormData(): 
Var files=document.getElementById("file1").files: 
for (var i= 0:i<files.length:i++) { 
var file=files[i]: 
formData.append('myfile[]'. file): 
} 
var xhr = new XMLHttpRequestO: 
xhr.open('POST,','test.php', true): 
xhr.onload = function(e) { 
让 (this status — 200) { 
document.getElementById("result").innerHTML=this.response: 


| } 
| 
| xhr.send(formData): 
| 
</script> 


| <form id=-"forml" enctype="multipart/form-data"> 
| 选择 文件 <input type="file" id=-"filel" name="file" multiple><br/> 
| <input type="button" value=" 发 送 " onclick="uploadFile0:"> 
| </form> 
<output id="result" ></output> 
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后 台 页 面 (test.php) | 


<?php 
for ($i=0:$i<count($ FILES['myfile"]['name']):Si++) { 
move_uploaded file($ FILES[myfile][mp _name’][$i]."./upload/".iconv("utf-8","gbk", 
$_FILES['myfile]['name"][$i])): 
echo ' 已 上 传 文件 : '$_FILES[myfile][mame][Sil,<br>' 
yr 
flushO|; 
?> 


16.2.6 发送 Blob 对 象 


所 有 File 对 象 都 是 一 个 Blob 对 象 ， 所 以 同样 可 以 通过 发 送 Blob 对 象 的 方法 来 发 送 文件 。 | 
【示例 】 下 面 示例 在 页 面 中 显示 一 个 “复制 文件 ”按钮 和 一 个 进度 条 (progress 元 素 )， 单 击 “ 复 | 

制 文件 ”按钮 后 ，JavaScript 使 用 当前 页 面 中 所 有 代码 创建 一 个 Blob 对 象 ， 然 后 通过 将 该 Blob 对 象 | 
指定 为 XML HttpRequest 对 象 的 send() 方 法 的 参数 值 的 方法 向 服务 器 端 发 送 该 Blob 对 象 , 服务 器 端 接 | 
收 到 该 Blob 对 象 后 将 其 保存 为 一 个 文件 ， 文 件 名 为 “副本 ”+ 当前 页 面 文件 的 文件 名 〈 包 括 扩 展 名 )。 | 
在 向 服务 器 端 发 送 Blob 对 象 的 同时 , 页 面 中 的 进度 条 将 同步 显示 发 送 进度 , 演示 效果 如 图 16.6 所 示 。 
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这 择 文 件 选择 六 件 3 个 文件 





16.6 “发送 Blob 对 象 演示 效果 


具体 代码 解析 请 扫 码 学 习 。 
16.2.7 ” 跨 域 请 求 


跨 域 通信 实现 方法 : 在 被 请 求 域 中 提供 一 个 用 于 响应 请 求 的 服务 器 端 脚 本 文件 ， 并 且 在 服务 器 端 | 
返回 响应 的 响应 头 信息 中 添加 Access-Control-Allow-Origin 参数 ， 并 且 将 参数 值 指定 为 允许 向 该 页 面 | 
请 求 数据 的 域名 + 端口 号 即 可 。 

【示例 】 下 面 示例 演示 了 如 何 实 现 跨 域 数据 请 求 。 在 客户 端 页 面 中 设计 一 个 操作 按钮 ， 当 单 击 该 
按钮 时 ， 向 另 一 个 域 中 的 server.php 脚本 文件 请 求 数据 ， 该 脚本 文件 返回 一 段 简单 的 字符 串 ， 本 页 面 | 
接收 到 该 文字 后 将 其 显示 在 页 面 上 ， 演 示 效 果 如 图 16.7 所 示 。 














和 大 计 
响 启 袁 据 :和 孩 是 丰 良 异域 慑 务 器 的 数据 





图 16.7 跨 域 请 求 数据 


具体 代码 解析 请 扫 码 学 习 。 
5351，。 
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| 本 例 需要 PHP 服务 器 虚拟 环境 ， 同 时 在 站 点 根 目录 下 新 建 upload 文件 夹 ， 然 后 在 站 点 根 目录 新 
全 内 | 建 前 台 文件 test] html， 以 及 后 各 文件 testphp。 在 上 传 文件 时 ， 使 用 XMLHtpRequest 动态 显示 文件 
上传 的 进度 ， 效 果 如 图 16.8 所 示 。 








图 16.8 上 传 文件 


具体 代码 解析 请 扫 码 学 习 。 
16.3 在 线 练 习 


练习 JavaScript 异步 通信 的 应 用 ， 培 养 灵活 使 用 JavaScript 通信 技术 实现 客户 端 与 服务 器 无 刷新 
响应 的 基本 能 力 。 
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延迟 处 理 


Promise 是 一 种 抽象 的 异步 处 理 对 象 ， 其 核心 概念 为 “确保 在 一 件 事 做 完 之 后 ， 再 做 另 
一 件 事 ”， 这 个 概念 最 早出 现在 EE 语言 中 ， 现 在 JavaScript 也 引入 了 这 个 概念 ， 并 被 纳入 
ECMAScript 6 规范 。 目 前 ，Chrome 34+、Firefox 30+、Opera 20+ 和 Safari 8+ 版 本 浏览 器 都 
支持 Promise 对 象 。 

权威 参 者: https://davidwalsh.name/promises 


【 学 习 重 点 】 
MW 了 解 回 调 函数 。 
WI 灵活 应 用 Promise 对 象 。 





mR yo A wm 汪 痢 秆 ( 攻 训 本 双 反 ) 


17.1 延迟 处 理 基础 


全 = | 
全 本 节 将 简单 介绍 回调 函数 、 异 步 队列 和 延迟 操作 对 象 romise。promise 本 意 是 许诺 ， 这 里 引申 为 
许诺 未 来 特定 条 件 下 执行 指定 回调 函数 。 


| 17.1.1 从 回调 函数 到 异步 队列 








回 | 在 Web 开发 中 ，callback (回调 函数 ) 深入 人 心 ， 它 是 JavaScript 执行 异步 操作 的 基本 方式 。 
国生 寺 才 | 【示例 1】 下 面 示例 设计 使 用 loadImg0 自 定义 函数 加 载 外 部 图 像 ajpg， 如 果 成 功 ， 则 再 加 载 
| bjpg， 加 载 sjpg。 最 后 ， 全 部 加 载 成 功 后 ， 在 控制 台 输 出 提示 信息 ， 提 示 全 部 加 载 成 功 。 
| function loadImg(img,fun){ 

var_img = new Image(): 

_img.src = img; 

_img.onload = fun: 


} 
loadImg(images/1.jpg', function|O { 
loadImg('images/2.ipg', fonctionO { 
loadImg('images/3.jpg’, functionO { 
console.log(' 全 部 加 载 完 成 。"); 
D); 
D: 
D; 
上 面 代码 是 典型 的 回调 函数 金字 塔 模型 ， 用 来 设计 JavaScript 异步 操作 队列 。 当 异步 操作 的 任务 
很 多 的 时 候 ， 维 护 大 量 的 callback 将 是 一 场 灾难 。 
【示例 2】 下 面 示例 模拟 连续 执行 三 个 异步 操作 。 在 页 面 中 显示 一 个 “ 读 取 文 件 ” 按 钮 ， 当 单 击 
按钮 时 ， 将 读 取 1.txt、2.txt、3.txt 三 个 文本 文件 ， 并 将 读 取 的 文件 内 容 依 次 显示 在 页 面 中 。 
加 ”1txt 文 件 
1. 立 志 : 昨夜 西风 凋 珀 树 。 独 上 高 楼 ， 望 尽 天 涯 路 。 一 一 晏殊 的 《 蝶 恋 花 》 
加 ”2.txt 文 件 
2. 执 着 : 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。 一 一 柳 永 的 《 凤 栖 梧 》 


回 3:txt 文 件 
| 3. 喜 悦 ; 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 一 辛弃疾 的 《青玉 案 。 元 夕 》 
| 回 test2.html 
| 


script> 
function getData(fileName){ 
| Var xhr = new XMLHttpRequestO: 
| xhr.open("GET".fileName. true): 
| xhr.onreadystatechange = function0 { 
| if (xhrreadyState —4) { 
f(xhr.status 一 200){ 
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Var box=document.getElementById("box") 
box.innerHTML+="<p>" + xhrresponseText + "</p>": 


1 
else alert(" 读 取 文件 失败 "): 





2 
} 
xhr.sendO; 
} 
function readO{ 
getData("l.txt"): 
getData("2.txt") 
getData("3.txt") 
} 
</script> 
<input type="button" value=" 读 取 文件 " onclick="readO"/> 
<div id="box"></div> 


在 浏览 器 中 访问 示例 页 面 ， 单 击 “ 读 取 文件 ”按钮 ， 脚 本 将 1.txt、2.txt 和 3.txt 文件 中 的 内 容 显 
示 在 页 面 中 ， 页 面 显示 效果 如 图 17.1 所 示 。 


Be ©) - SB hpihocelhost sos/myste res hm = 86| sconhox 


该 下 六 件 
1 立志 ， 昨 艳 西风 凋 乔 树 。 独 上 高 模 ， 望 尽 天 泽 路 。 县 下 的 《 蝶 恋 亿 》 


2 执着 ， 衣 带 潮 宽 挫 不 悔 ， 为 伊 消 瘟 人 居 忻 - 一 一 元 未 的 世 风 栖 栖 》 
3. 喜 倍 ， 众 里 寻 他 千百度 ,车 然 四 首 ， 那 人 却 在 灯火 者 儿 处 。 辛弃疾 的 《 青 王 案 元 夕 》 





图 17.1 在 页 面 中 分 别 读 取 文 件 内 容 


【示例 3】 如 果 将 代码 中 任 一 异步 读 取 操 作 指 定 为 一 个 不 存在 的 文件 ， 则 页 面 中 将 显示 其 他 读 取 
成 功 文件 的 内 容 。 


function readO{ 
getData("1.txt"):; | 
getData("2.txt"); | 
getData("4.txt"); | 
} | 


在 浏览 器 中 访问 页 面 ， 单 击 “ 读 取 文 件 ”按钮 ， 则 浏览 器 弹出 “ 读 取 文 件 失败 ”提示 信息 文字 ， 
页 面 中 仍 显示 脚本 读 取 成 功 的 其 他 文件 内 容 ， 如 图 17. 2 所 示 。 








Ge ® -| Hap/ocalhests0s/myRe /et3 hin ~ 30 |B bcahost x] 
读 取 文臣 
1 立志 ,昨夜 西风 再 全 朵 - 忽 上 高 搂 ， 攻 




















17.2 读 取 最 后 一 个 文件 失败 
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| | 
| 现在 修改 脚本 逻辑 :设计 当 读 取 任意 一 个 文件 失败 时 ， 任 何 文件 内 容 均 不 显示 。 
| 【示例 4】 下 面 示例 设计 全 局 变量 count 用 于 记录 成 功 读 取 文件 的 个 数 ， 初 始 值 为 0， 每 成 功 读 
| 取 到 一 个 文件 时 将 该 值 加 1， 当 该 值 等 于 3 时 ， 将 读 取 到 的 全 部 文件 内 容 显示 在 浏览 器 中 ， 如 图 173 


| 呈 。 
| <script> 
function getData(fileName){ 


| var xhr = new XMLHI ; 
xhr.open("GET",fileName, true); 
xhr.onreadystatechange = fonction0O { 
if (xhrreadyState — 4) { 
if (xhr.status 一 200){ 
Count+=1; 
这 count 一 3){ 
Var box=document.getElementById("box") 
box.innerHTML+="<p>" + xhr.responseText + "</p>"; 


六 作 半 由 


和 A 


| 

| 

| 

| 

| } 

| } 

| 日 

| alert(" 读 取 文件 失败 "); 
| } 

} 

| xhrsendO): 

| } 

| fonctionreadO{ 

| var count = 0; 

| getData("1.txt"); 

| getData("2.txt"): 

| getData("4.txt") 

| 

</script> 
TY J a 
| 六 文件 x 
| 

| 

| 

| 

| 





| 图 17.3 读 取 文件 失败 时 不 再 显示 全 部 内 容 

| 在 应 用 开发 中 ， 经 常会 遇 到 “一 件 事 做 完 之 后 ， 再 做 另 一 件 事 ” 的 处 理 要 求 ， 尤 其 是 在 设计 动画 

| 的 时 候 。 虽 然 可 以 使 用 回调 函数 来 实现 这 个 要 求 ， 但 回调 函数 并 不 能 满足 所 有 情况 。 
通过 本 节 示 例 演示 ,大 家 能 够 深切 体会 到 在 异步 操作 中 ， 大 量 的 回调 函数 队列 可 能 会 给 开发 带 来 

不 少 麻烦 ， 简 单 的 队列 处 理 ， 也 许 能 够 从 容 应 对 ， 但 是 在 复杂 的 逻辑 环境 中 ， 各 种 关系 交织 在 一 起 ， 

很 容易 出 错 ， 或 者 引发 逻辑 混乱 。 因 此 ， 有 必要 使 用 一 种 全 新 的 编程 机 制 来 解决 这 种 重复 性 的 操作 ， 

于 是 JavaScript Promise API 规范 应 运 而 生 ， 切 合 了 人 们 的 痛 点 需求 。 
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17.1.2 ”使 用 promise 对 象 


JavaScript Promise API 规范 的 内 容 不 多 ， 简 单 描述 如 下 : | 大 
回 “一 个 promise 对 象 可 能 有 三 种 状态 : 等 待 (pending) 、 已 完成 (fulfilled) 、 已 拒绝 Crejected) 。 | 食 扩 | 
回 “一 个 promise 对 象 的 状态 只 可 能 从 “等 待 ” 转 到 “完成 ”或 者 “拒绝 ”状态 ,不 能 逆向 转换 ，， 
同时 “完成 ”和 “拒绝 ”状态 不 能 相互 转换 。 | 
回 ”promise 必须 实现 then0 方 法 ，then 就 是 promise 的 核心 ， 而 且 then 必须 返回 一 个 promise， | 
同一 个 promise 的 then 可 以 调用 多 次 ， 并 且 回 调 的 执行 顺序 跟 它 们 被 定义 时 的 顺序 一 致 。 | 
回 then() 方 法 接收 两 个 参数 ， 第 一 个 参数 是 成 功 时 的 回调 ， 在 promise 由 “等 待 ”转换 到 “ 完 
成 ”状态 时 调用 ; 另 一 个 是 失败 时 的 回调 ， 在 promise 由 “等 待 ”转换 到 “拒绝 ”状态 时 调 
用 .同时 ,then 可 以 接受 另 一 个 promise 传 入 , 也 接受 一 个 “类 then ”的 对 象 或 方法 , 即 thenable 
对 象 。 
1. 创建 许诺 
创建 promise 对 象 的 语法 格式 如 下 所 示 : 
Var promise = new Promise(function(resolve. reject){ 
// 执 行 异步 操作 ， 或 者 其 他 代码 
这 /* 一 切 正常 +/){ 
resolve(" 一 切 正常 "): 
}else{ 
reject(Error(" 处 理 失败 ")): | 
} 
» | 
Promise 类 型 函数 包含 一 个 参数 : 回调 函数 。 回 调 函数 又 包含 两 个 参数 : 回调 函数 。 如 果 执 行 结 
果 正 常 ， 则 调用 resolve 回调 函数 ， 和 否则 调用 reject 回调 函数 。 


这 提示 : 在 Promise API 中 ， 将 执行 结果 正常 称 为 promise 对 象 返回 肯定 结果 ， 将 执行 失败 称 为 
promise 对 象 返回 否定 结果 。 


【示例 1】 下 面 示例 新 创建 一 个 promise 对 象 ， 定 义 当 图 像 加 载 成 功 时 ， 返 回 肯 定 结果 ; 当 加 载 | 
失败 时 ， 返 回 否定 结果 。 
Var promise = new Promise(function(resolve. Tejecb{ 
var_img = new Image(): 
_img.src = images/1 .jpg': 
_img.onload = resolve: 
_img.onerror = reject: 





























D 

2. 执行 许诺 

Promise 类 型 定义 了 一 个 原型 方法 : then0， 使 用 该 方法 可 以 执行 一 个 许诺 。then( 方 法 的 具体 用 | 
法 如 下 所 示 : 

Ppromise.then(resolve. reject) 

该 方法 包含 两 个 参数 ， 参 数值 均 为 回调 函数 ， 简 单 说 明 如 下 : 

回 resolve: 设置 当 返 回 肯 定 结果 时 ， 调 用 的 回调 函数 。 
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reject: 设置 当 返回 否定 结果 时 ， 调 用 的 回调 函数 。 
【示例 2】 针 对 示例 1， 在 Promise 类 型 实例 上 调用 then0， 分 别传 入 resolve 和 reject 函数 ， 设 计 


当 图 片 加 载 成 功 时 ， 弹 出 “加 载 完成 ”提示 信息 ; 而 当 加 载 失败 时 ， 弹 出 “加 载 失败 ”提示 信息 ， 如 
图 17.4 所 示 。 


promise.then(resolve.reject) : 

function resolveO{ 
alert(" 加 载 完 成 "); 

} 

function rejectO{ 
alert(" 加 载 失败 "); 

} 





17.4 ”提示 加 载 完成 


【示例 3】 针对 17.1.1 节 中 示例 2， 我 们 可 以 使 用 promise 对 象 重新 对 其 进行 设计 。 
<script> 
function getData(fileName){ 
Var promise = new Promise(function(ok.ern){ 
var xhr = new XMLHttpRequestO: 
xhr.open("GET" ,fileName, true): 
xhr.onreadystatechange = functionO { 
if (xhrreadyState —4) { 
f(xhrstatus 一 200) ok(xhr.responseText): 
else errO 


function errO{ 
alert(" 读 取 文件 失败 "): 

} 

function readO{ 
getData("1.txt"): 
getData("2.txt"): 
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getData("3.txt"); 

} | 
</script> | 
| 


<input type="button" value=" 读 取 文件 " onclick="read0"/> | 优 峰 
<div id="box"></div> | 固 ~ 


了 hen0 方 法 返回 一 个 promise 对 象 ， 类 似 于 jQuery 方法 的 返回 值 总 是 jQuery 对 象 一 样 。 因 此 , 用 | 
户 可 以 通过 链 式 语 法 调用 promise 对 象 的 then() 方 法 ， 连 续 运 行 附加 的 异步 操作 。 | 
【示例 4】 针 对 示例 2， 我 们 可 以 使 用 下 面 写法 ， 让 提示 信息 连续 提示 3 次 。 


Ppromise.then(resolve.reject).then(resolve.reject).then(resolve.reject): 


【示例 5】 示例 3 没有 实际 意义 ， 不 过 用 户 可 以 利用 then0 让 promise 对 象 连续 执行 运算 。 例 如 ， 
在 实例 化 Promise 函数 体内 ， 仅 调用 resolve0 回 调 函 数 ， 然 后 在 调用 then0 方 法 时 ， 仅 需要 传递 一 个 | 
回调 函数 参数 ， 在 其 中 执行 连续 运算 ， 由 于 实例 化 的 过 程 ， 实 际 上 等 于 创建 了 一 个 闭 包 体 ， 其 内 变量 | 
会 长 期 存在 。 


var promise = new Promise(function(resolve, rejecb{ | 
Tesolve(1); | 
D 
Ppromise.then(function(val){ 
alert(vaD; /提示 1 
Teturn Val+1l; 
}).then(function(vaD { 
alert(val); /提示 2 
Teturn Val+1l; 
}).then(function(vaD{ 
alert (vaD); /提示 3 
return Val+1: 
}).then(function(vaD) { 
alert (vaD): /提示 4 | 








D: | 

【示例 6】 下 面 示例 在 页 面 中 设计 一 个 “ 读 取 用 户 资料 ”按钮 及 一 个 表单 ， 单 击 “ 读 取 用 户 资料 ”| 

按钮 时 将 从 服务 器 端 usertxt 文件 中 读 取 一 个 用 户 资料 ， 并 将 其 显示 在 表单 中 。 
回 user.txt 文件 


muser':" 张 三 " 
"password":"123456" 
} 


回 test6.html 


<script> 
function readO{ 
var fileName="user.txt": 
Var promise=new Promise(function(resolve. reject) { 
var xhr = new XMLHttpRequest(): 
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xhr.open("GET".fileName., true): 
xhr.onreadystatechange = fonction0 { 
if (xhrreadyState —4) { 
if (xhr.status — 200) { 
Tesolve(xhr.responseText); 
jelse 
IejectO: 
} 
} 
xXhrsendO; 
D; 
Ppromise.then(function(response){ 
return JSON.parse(response); 
上 
fnnctionO{ 
alert(" 读 取 失 败 "); 
-then(function(ob){ 
document.getElementById("user").value=obj.user: 
document.getElementById("password").value=obj.password; 
入: 
} 
</script> 
<form id="form1"> 
用 户 名 : <input type="text" id="user" /><br/> 
密码 :<input type="number" id="password" /><br/><br/> 
<input type="button" value=" 读 取 资 料 " onclick="readO"/> 
</form> 
使 用 Chrome 浏览 器 访问 test6.html 页 面 ,在 页 面 中 单 击 “ 读 取 资 料 ” 按 钮 ,将 从 服务 器 端 user.txt 
文件 中 读 取 一 个 用 户 资料 并 将 其 显示 在 表单 中 ， 如 图 17.5 所 示 。 
D lecolhost8030/mysite, x 


© ©localhost 


用 户 名 : 了 三 


密码 ; |23456 
村 


图 17.5 读 取 用 户 资料 


17.2 案例 实战 





下 面 通过 示例 形式 进一步 介绍 JavaScript Promise API 复杂 用 法 。 


,17.2.1 队列 操作 


通过 17.1 节 示 例 ， 我 们 可 以 看 到 then0 方 法 允许 链 式 语法 ， 使 用 链 式 语法 可 以 实现 连续 操作 。 
如 果 调 用 then() 方 法 ， 作 为 参数 的 回调 函数 返回 一 个 值 ， 那 么 下 一 个 then0 方 法 将 会 立即 调 
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， 并 且 使 用 该 返回 值 。 | 
回 ”如果 调用 then0 方 法 ， 作 为 参数 的 回调 函数 返回 一 个 promise 对 象 ， 那 么 下 一 个 then0 方 法 | 
将 对 其 进行 等 待 ， 直 到 这 个 promise 对 象 的 回调 函数 参数 的 处 理 结果 确定 以 后 才 会 被 调用 。 

【示例 】 下 面 示例 设计 在 页 面 中 显示 一 个 “ 读 取 文 件 ” 按 钮 ， 当 单 击 该 按钮 时 ， 脚 本 依次 读 取 | 
1.txt、2.txt、3.txt 三 个 文件 ， 并 将 读 取 到 的 文件 内 容 显示 在 页 面 中 ， 这 三 个 文本 文件 的 内 容 可 参考 第 | 
17.1.1 节 示 例 2。 中 途 如 果 读 取 失 败 ， 则 所 有 操作 都 不 会 显示 ， 只 有 全 部 读 取 成 功 之 后 ， 才 允许 全 部 


显示 。 























<script> | 
function getData(fileName){ 
return new Promise(function(resolve., reject) { 
var xhr = new XMLHttpRequestO: 
xhr.open("GET",fileName., true); 
xhr.onreadystatechange = functionO| { 
if (xhrreadyState 一 4){ 
if (xhr.status 一 200){ 
allData += "<p>" + info + "</p>"; 


Tesolve0: 
jelse{ 
alert(" 读 取 文 件 失败 "); 
} 
| 
xhr.send(); | 
D; 
} 
function readO{ | 
allData=""; | 


getData("1.txt").then(functionO{ 
Tetum getData("2.txt"): 





.then(functionO{ 
return getData("3.txt"); | 
.then(functionO{ | 
Var box=document.getElementById("box"): | 
box.innerHTML=allData: | 
和 | 
} | 
</script> | 


<input type="button" value=" 读 取 文 件 " onclick="readO"/> 
<div name="box" id="result"></div> 


在 上 面 脚本 中 ,设计 then0 方 法 的 返回 值 总 是 promise 对 象 ， 这 样 强迫 then0 链 式 语法 调动 ， 必 须 | 
总 是 成 功 才 可 以 ， 否 则 就 无 法 顺利 执行 后 面 的 then0 方 法 调用 。 


17.2.2 异常 处 理 


行 失败 调用 。 
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| promise then(functionGresulb){ 

| consolelog(resulb: /执行 成 功 

| ,finction(em){ 

| console.log(err): // 执 行 失败 

全 站 | »; 
用 户 可 以 使 用 catch 捕捉 Promise 处 理 时 抛 出 的 异常 ， 语 法 格式 如 下 

| Ppromise.then(function(result) { 

| consolelog(result): /执行 成 功 

D.catch(function(err) { 


console.log(err); /执行 失败 
»; 
上 面 两 段 代码 具有 相同 的 功能 ， 但 是 then0 方 法 的 语法 更 简明 ， 可 读 性 更 高 。 实 际 上 ， 第 二 段 代 
码 等 同 于 下 面 这 段 代码 : 
promise.then(function(result) { 
console log(result): /执行 成 功 
}).then(undefined,function(er){ 
console.log(err); /执行 失败 
D;: 
promise 对 象 返回 否定 结果 之 后 , 会 跳 转 到 之 后 第 一 个 配置 了 否定 回调 函数 的 then() 方 法 , 或 者 是 
catch() 方 法 。 
对 于 then (funcl, func2) 来 说 ，funcl 或 func2 其 中 之 一 将 会 被 调用 ， 但 绝 不 会 两 者 都 被 调用 。 
对 于 then(funcD).catch (func2) 来 说 ， 当 fancl 执行 失败 时 ， 两 者 都 会 被 调用 ， 因 为 它们 处 于 链 式 语 
法 调用 的 不 同位 置 。 
promise 对 象 的 否定 回调 函数 可 以 通过 promise.reject(0) 方 法 显 式 调用 , 也 可 以 被 Promise 构造 函数 
的 参数 值 回调 函数 中 抛 出 的 错误 隐 式 调用 。 
【示例 1】 在 Promise 构造 函数 的 参数 值 回 调 函 数 中 ， 将 抛 出 一 个 异常 ， 该 异常 将 被 catch 机 制 
捕获 ， 从 而 在 浏览 器 控制 台中 输出 “处 理 失 败 !” 文字。 
Var jsonPromise = new Promise(function(resolve. rejecb{ 
// 当 参数 值 为 无 效 的 JSON 对 象 时 ，JSON.parse 将 抛 出 一 个 错误 ， 导 致 隐 式 否定 
resolve(JSON parse("This isn*t JSON")) 














D) 

jsonPromise.then(function(data){ 
/下 面 代码 不 会 被 执行 
console.log(" 处 理 正常 1", data): 

.catch(function(er) { 

| /下 面 代码 将 被 执行 

| console.log(" 处 理 失 败 ", erD: 

| 

| 


D) 
| 这 种 机 制 将 在 Promise 构造 器 的 参数 值 回调 函数 中 执行 所 有 的 promise 相关 工作 时 ， 变 得 非常 有 
| 用 ， 因 为 错误 将 被 自动 捕捉 并 转化 为 否定 结果 。 
| 【示例 2】 在 promise 对 象 的 then( 方 法 的 参数 值 回调 函数 中 抛 出 错误 。 


Var promise = new Promise(function(resolve. reject){ 
TesolveO: 
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D 
promise.then(functionO{ 

Var a: 

console log(a-10): // 抛 出 未 定义 错误 
}).catch (function(err){ 

/下 面 代码 将 被 执行 

console log(" 错 误 : ", erD: 
D:; 


17.2.3 ”创建 序列 


在 使 用 promise 对 象 序列 时 ， 需 要 用 到 Promise 类 的 静态 方法 resolve0。 该 方法 最 多 可 使 用 一 个 | 
参数 , 当 参 数值 为 promise 对 象 时 , resolve0 方 法 根据 传 入 的 promise 对 象 复制 一 个 新 的 promise 对 象 ，| 
如 果 传 入 参数 为 其 他 任何 值 ，resolve0 方 法 将 创建 一 个 以 这 个 值 为 肯定 结果 的 promise 对 象 。 如 果 不 | 
指定 参数 值 ， 创 建 一 个 以 undefined 为 肯定 结果 的 promise 对 象 。 | 

【示例 】 在 下 面 示例 页 面 中 , 显示 一 个 文件 控件 和 一 个 按钮 。 当 使 用 文件 控件 选取 多 个 文本 文件 ，| 
并 单 击 按钮 时 ， 脚 本 将 读 取 到 的 文件 内 容 显示 在 页 面 中 。 
<script> 
Var result=document.getElementById("result"); 
Var file=document.getElementById("file"); 
Var allData=""; 
function getData(file){ 
return new Promise(function(resolve, reject) { 
Var reader = new FileReader(): 
// 将 文件 以 文本 形式 进行 读 入 页 面 
readerreadAsText(file): 
reader.onload = function(D{ 
allData+=this.result+"<br/>"; 








Tetum getData(file).catch(function(ern){ 
alert(" 读 取 文 件 失 败 "); 


Tesolve0: 
} 
reader.onerror=function(O){ 
rejectO: 
} | 
入 | 
} | 
function get(file){ | 
| 


throw err: | 

六 : | 

} | 
function getSequenceO{ ! 
var files=[]; | 


for(var i=0:i<document.getElementById("file").files.length:i++){ 
files.push(document.getElementById("file").files[i]): 

} 

Var sequence=Promise.resolve(): 

files.forEach(function(file){ 
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| sequence = sequence.then(functionO { 
| Ietum get(file): 
| 


// 将 文件 以 文本 形式 进行 读 入 页 面 
| 


| Promise.resolve().then(functionO{ 
Teturn getSequence(); 
| Dthen(functionO{ 
| Var result=document. getElementById("result"); 
| result.innerHTMIL=allData; 
| TU 
| console.log(" 读 取 文件 发 生 错 误 "); 
) D; 
| </script> 
| <div id="divTip"></div> 
| <label> 选 择 文件 : </label> 
| <input type="file" id="file" multiple /> 
| <input type="button" value=" 读 取 文件 " onclick="readO"/> 
| <div id="result"></div> 
| 在 浏览 器 中 预览 , 示例 页 面 中 显示 一 个 文件 控件 和 一 个 控制 按钮 ， 当 使 用 文件 控件 选取 多 个 文本 
| 文件 ， 并 单 击 “ 读 取 文件 ”按钮 时 ， 脚 本 将 读 取 到 的 文件 内 容 显 示 在 页 面 中 ， 如 图 17.6 所 示 。 
| 
| 
| 
| 
| 
| 
| 





D Iocalhocts080/mysite x 
© © localhost 080/mysi 
选择 文件 ，| 选 天 文件 3 个 文件 本 到 件 


1 立志 ; 昨夜 西风 半天 村 。 独 上 高 柑 ， 拨 尽 天 过 路 ， 一 一 一 一 县 丈 的 《 蝶 亦 花 》 
2 执 看 ; 衣 囊 渐 训 烙 不 伤 ， 为 伊 消 得 人 以 习 .一 一 一 一 堵 永 的 《民权 | 


5 》 
3 喜悦 ; 众 里 寻 他 千百度 ， 友 然 回首 ， 报 人 却 在 灯火 阐 玩 处 。 辛弃疾 的 《 青 王 案 . 元 夕 》 





图 17.6 显示 读 取 到 的 所 有 文件 内 容 


在 上 面 示例 中 , 当 单 击 “ 读 取 文件 ”按钮 时 ,调用 read0 函 数 , 在 该 函数 中 首先 使 用 Promise.resolve0 
| 方法 创建 一 个 Promise 对 象 。 然 后 调用 该 对 象 的 then0 方 法 ， 以 确保 首先 调用 getSequence0 函 数 ， 并 
| 且 待 该 函数 内 的 所 有 异步 处 理 执行 完毕 后 ， 继 续 调用 该 对 象 的 then0 方 法 在 页 面 中 显示 用 户 选取 的 所 
| 有 文件 内 容 。 
| / 砚 文 伯 以 文本 形式 进行 读 入 页 面 
| fnnction readO{ 
| Promise resolve() .then(fnctionO{ 


DD-catch(function| 
console.log(" 读 取 文件 发 生 错 误 "): 
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性 | 

7: | 

} | 

| 

在 getSequence0 函 数 中 ， 首 先 根据 用 户 选取 的 所 有 文件 ， 创 建 一 个 files 数组 。 | 

function getSequenceO{ | 有 

var files=[]; | 
for(var i-0:i<document getElementById("file") files lengthi+ +){ 

files.push(document.getElementById("file").files[i]): | 

| 


使 用 Promise. resolve() 方 法 创建 一 个 Promise 对 象 ， 并 将 其 赋值 给 sequence 变量 。 
Var sequence=Promise.resolve():; 


最 后 ， 对 files 数组 进行 遍历 ， 对 数组 中 的 每 一 个 文件 调用 get0 方 法 以 读 取 文件 内 容 ， 并 将 异步 
处 理 的 执行 结果 赋值 给 sequence 对 象 ， 以 确保 每 一 个 异步 处 理 依 序 执行 。 
files.forEach(function(file){ 
sequence = sequence.then(function() { 
return get(file); 
六: 
D: 
Teturn sequence: 
在 get0 方 法 中 ， 调 用 getData0 方 法 以 读 取 文 件 。 如 果 读 取 失 败 ， 则 在 浏览 器 中 弹出 显示 “ 读 取 
文件 失败 ”提示 信息 文字 并 且 抛 出 该 错误 。 


function get(file){ 
return getData(file).catch(function(err){ 
alert(" 读 取 文 件 失败 "); 
throw err; 
D: 
} 


在 getData0 方 法 中 ， 创 建 一 个 Promise 对 象 以 读 取 每 一 个 文件 ， 如 果 读 取 成 功 ， 就 调用 resolve 
参数 值 回调 函数 ， 如 果 读 取 失 败 ， 就 调用 reject 参数 值 回 调 函数 。 
function getData(file){ 
return new Promise(function(resolve. reject) { 
var reader = new Fi 三 
// 将 文件 以 文本 形式 进行 读 入 页 面 
readerreadAsText(file): 
reader.onload = function(D { 
allData+=this.result+"<br/>"; 
TesolveO: 














} 
Teaderonerror=fonction0{ 
TejectO: 


国 
D: 
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| 使 用 Promise 的 all0 工 具 函 数 可 以 实现 并 行 执行 多 个 异步 处 理 ，all0 函 数 用 法 如 下 : 
侠 | Promise.all(arrayOfPromises).then(function(arrayOfResults){ 


| /回调 函数 代码 
D 


| Promise.all0 函 数 以 一 个 Promise 对 象 数 组 作为 参数 , 并 创建 一 个 当 所 有 执行 结果 都 已 成 功 时 返回 
| 肯定 结果 的 promise 对 象 。 在 该 对 象 的 then0 方 法 中 可 以 得 到 一 个 结果 数组 ， 无 论 该 对 象 的 肯定 结果 
| 为 何 ， 该 结果 数组 与 传 入 的 promise 对 象 数组 顺序 保持 一 致 

| 【示例 】 下 面 示例 演示 了 Promise.all0 工 具 函 数 的 应 用 。 当 在 页 面 中 单 击 “ 读 取 文 件 ” 按 钮 时 ， 

| 调用 read0 函 数 ， 在 该 函数 中 使 用 Promise.all0 函 数 读 取 1txt、2.txt、3.txt 文件 ， 传 入 参数 分 别 为 
| Promise.all([getData("1.txt"),getData("2.txt"),getData("3.txt")])。 

















| <script> 

| function getData(fileName){ 

| Teturn new Promise(function(resolve, reject) { 

| var xhr = new XMLHttpRequestO; 

| xhr.open("GET",fileName, true); 

| xhr.onreadystatechange = function0O { 

| if (xhr.readyState 一 4){ 

| if (xhr.status 一 200){ 

| Tesolve(xhr.responseText); 

| jelse{ 

| TejectO: 

| } 

| } 

| } 

| xhr.sendO); 

| 六 

| } 

| function readO{ 

| Promise.all([getData("1.txt").getData("2.txt").getData("3.txt")]) 

| .then(function(responses){ 

| Var box=document.getElementById("box"): 

| responses.forEach(function(response){ 

| box.innerHTML+="<p>" + response + "</p>":; 
D; 

| } fanctionO{ 

| alert(" 读 取 文件 失败 "); 

| By 

| } 

</script> 

<input type="button" value=" 读 取 文件 " onclick="readO"/> 

<div id="box"></div> 


| 
| 
| 在 getData0 函 数 中 将 创建 并 返回 一 个 promise 对 象 ， 该 对 象 的 作用 为 读 取 文 件 ， 读 取 成 功 则 返 
| 肯定 结果 ， 调 用 resolve0 回 调 函 数 ， 读 取 失 败 则 返回 否定 结果 ， 调 用 reject0 回 调 函数 。 
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在 read0 函 数 中 , 待 三 个 getData0 函 数 中 的 异步 处 理 全 部 执行 完毕 后 , 调用 Promiseall0 函 数 所 创 | 
建 的 promise 对 象 的 then0 方 法 ， 将 读 取 到 的 文件 内 容 全 部 显示 在 页 面 中 ， 如 果 任 一 getData0 函 数 中 | 
创建 的 promise 对 象 返回 否定 结果 ， 则 在 浏览 器 中 弹出 “ 读 取 文件 失败 ”提示 信息 文字 。 | 
次 提示 : JavaScript Promise API 还 提供 一 个 Promiserace0 工 具 函 数 ， 该 函数 同样 以 一 个 promise 对 | 
象 数组 作为 参数 ， 但 是 当 数组 中 的 任何 元 素 返 回 肯定 结果 时 ，Promise race0 函 数 立 即 返 回 | 
肯定 结果 ， 或 者 当 任何 元 素 返回 否定 结果 时 ， 立 即 返回 否定 结果 。 





17.3 在 线 练 习 


练习 Promise 操作 。 
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HTML5 其 他 API 


本 章 将 介绍 HTML5 中 其 他 一 些 各 具 将 色 的 API， 这 些 API 简单 ， 但 很 实用 ， 浏 览 器 支 
持 情况 不 是 很 好 ， 适 合 读者 先 了 解 。 


【 学 习 重 点 】 
MH 了 解 所 标 指 针 锁 定 API。 
MH 党 担 requestAnimationFrame 的 基本 应 用 。 


WI 使 用 Mutation Observer。 
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18.1 指针 锁定 API 


鼠标 指针 锁定 API 是 一 个 关于 鼠标 指针 的 移动 信息 (不 是 鼠标 光标 的 绝对 位 置信 息 ) 的 API。 它 | 
允许 用 户 获取 鼠标 指针 的 移动 信息 ,将 鼠标 事件 锁定 到 单个 目标 元 素 上 ， 消 除 对 于 鼠标 指针 在 某 个 方 | 
向 上 可 移动 距离 的 限制 ， 同 时 从 屏幕 上 移 除 〈 本 来 可 见 的 ) 鼠标 指针 。 


18.1.1 认识 鼠标 指针 锁定 API 


鼠标 指针 锁定 API 是 一 个 与 鼠标 信息 捕捉 相关 的 API。 鼠标 信息 捕捉 机 制 将 在 鼠标 指针 被 拖 动 的 
情况 下 针对 一 个 目标 元 素 的 鼠标 事件 连续 提供 鼠标 指针 的 相关 信息 , 但 是 当 鼠 标 左 键 被 松 开 时 ,该 事 
件 也 将 被 终止 。 鼠 标 指针 锁定 API 与 鼠标 信息 捕捉 机 制 不 同 的 是 : 

即使 鼠标 左 键 已 被 松 开 ， 鼠 标 指针 锁定 API 也 不 会 停止 对 鼠标 指针 的 获取 ， 除 非 脚 本 程序 | 

调用 该 API 中 的 方法 来 显 式 停止 对 鼠标 指针 信息 的 获取 。 

鼠标 指针 锁定 API 不 受 浏览 器 或 屏幕 边界 的 限制 。 

当 鼠 标 指针 锁定 API 被 调用 后 ， 不 管 鼠标 左 键 的 状态 是 什么 ， 它 将 持续 获取 鼠标 指针 信息 。 

鼠标 指针 锁定 API 将 把 光标 给 隐藏 起 来 。 

目前 ，Firefox 14+、Chrome 22+、Opera 18+ 版 本 浏览 器 对 鼠标 指针 锁定 API 提供 支持 。 


18.1.2 案例: 设计 全 屏 鼠 标 指针 锁定 


本 示例 设计 在 页 面 中 显示 一 个 “锁定 鼠标 指针 ”按钮 与 一 个 div 元 素 。 当 页 面 打开 时 ， 在 控制 台 
中 不 断 输出 鼠标 指针 的 移动 信息 ， 当 用 户 把 鼠标 指针 移动 到 浏览 器 或 屏幕 之 外 时 ,控制 台 将 停止 输出 
信息 。 如 果 用 户 单 击 “ 锁 定 鼠标 指针 ”按钮 ，JavaScript 脚本 将 把 该 div 元 素 设 定 为 全 屏 状态 ， 当 用 
户 把 鼠标 指针 移动 到 浏览 器 或 屏幕 之 外 时 ,控制 台 不 会 停止 输出 鼠标 指针 的 移动 信息 。 当 用 户 退 出 全 
屏 状 态 时 ，JavaScript 脚本 将 停止 鼠标 指针 锁定 ， 当 用 户 把 鼠标 指针 移动 到 浏览 器 或 屏幕 之 外 时 ， 控 
制 台 将 停止 输出 信息 ， 演 示 效 果 如 图 18.1 所 示 。 

















(a) 非 全 屏 状态 
图 18.1 设计 全 屏 鼠 标 指针 锁定 
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(b) 全 屏 状态 

| 图 18.1 设计 全 屏 鼠标 指针 锁定 〔 续 ) 
| 

| 


容 提示 : 到 目前 为 止 ， 在 使 用 鼠标 指针 锁定 API 时 ， 需 要 在 锁定 目标 元 素 之 前 ， 首 先 将 目标 元 素 
设 定 为 全 屏 状态 ， 将 来 可 能 会 取消 这 个 限制 。 


回 





具体 代码 解析 请 扫 码 学 习 。 


18.2 requestAnimationFrame 


| HTML5 新 增 window.requestAnimFrame0 方 法 ， 用 于 以 一 种 更 好 的 性 能 来 实现 帧 动画 。 
| 
| 18.2.1 认识 requestAnimFrame 


在 HIML5+CSS3 时 代 ， 设 计 Web 动画 可 以 有 多 种 选择 ， 简 单 说 明 如 下 : 

使 用 CSS3 的 animattion+keyframes。 

使 用 CSS3 的 transition。 

通过 HTMLS5 的 canvas 作 图 来 实现 动画 。 

借助 jQuery 动画 实现 。 

| 使 用 JavaScript 原生 的 window.setTimout0 或 者 window.setInterval0， 通 过 不 断 更 新 元 素 的 状 
| 态 位 置 等 来 实现 动画 ， 前 提 是 画面 的 更 新 频率 要 达到 每 秒 60 次 才能 让 肉眼 看 到 流畅 的 动画 
| 效果 。 


因 办 办 办 


| 现在 HTML5 新 增 window.requestAnimationFrame() 方 法 ， 该 方法 用 来 在 页 面 重 绘 之 前 ， 通 知 浏览 
| 器 调用 一 个 指定 的 函数 ， 以 满足 开发 者 操作 动画 的 需求 。 这 个 方法 接收 一 个 函数 为 参数 ， 该 函数 会 在 
重 绘 前 调用 。 

< 负 注 意 : 如 果 想 得 到 连贯 的 逐 帧 动画 ， 在 函数 中 必须 重新 调用 requestAnimationFrame()。 

| 想 做 逐 帧 动画 时 ， 应 该 调用 该 方法 。 这 就 要 求 用 户 设计 的 动画 函数 执行 会 先 于 浏览 器 重 绘 动作 。 
| 通常 来 说 , 被 调用 的 频率 是 每 秒 60 次 , 但 是 一 般 会 遵循 W3C 标准 规定 的 频率 。 如 果 是 后 台 标签 页 面 ， 
| 重 绘 频率 则 会 大 大 降低 。 用 法 如 下 : 

requestID = window.requestAnimationFrame(callback): /Firefox 23 / IE10 / Chrome / Safari 7 (incl iOS) 


TequestID = window.mozRequestAnimationFrame(callback): ~ //Firefox < 23 
TequestID = window.webkitRequestAnimationFrame(callback): // Older versions Chrome/Webkit 
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参数 说 明 : | 


callback 在 每 次 需要 重新 绘制 动画 时 会 调用 这 个 参数 所 指定 的 函数 。 这 个 回调 函数 会 收 到 一 个 参 | 
数 ， 这 个 DOMHighResTimeStamp 类 型 的 参数 指示 当前 时 间距 离开 始 触 发 requestAnimationFrame | 
的 回调 的 时 间 。 | 
返回 值 requestID 是 一 个 长 整 型 非 零 值 ， 作 为 唯一 的 标识 符 ， 可 以 将 该 值 作为 参数 传 给 | 
window.cancelAnimationFrame() 来 取消 这 个 回调 函数 。 








深 提示 : 在 Web 动画 、APP 动画 中 , 我们 经 常 使 用 setInterval 或 setTimeout 定时 器 修改 DOM、 CSS | 
实现 动画 ， 例 如 : 
vartimer=setInterval(function0{ 
/动画 
}1000/60) 
/清除 动画 
clearInterval(timer):; 


不 过 这 种 方式 非常 耗费 资源 ， 经 常会 出 现 动画 卡 顿 现象 。 


HTMLS 的 requestAnimationFrame 方式 的 优势 如 下 : 
经 过 浏览 器 优化 ， 动 画 更 流畅 。 
窗口 没 激活 时 ， 动 画 将 停止 ， 节 省 计算 资源 。 
更 省 电 ， 尤 其 是 对 移动 终端 。 
TequestAnimationFrame 的 使 用 方式 如 下 : 
function animateO { 
/任意 操作 
requestAnimationFrame(animate): 
/做 动画 
日 
/请 求 动画 
TequestAnimationFrame(animate): 
有 的 时 候 需要 加 一 些 控制 ，requestAnimationFrameO 可 以 像 setInterval0 一 样 返回 一 个 句柄 ， 然 后 | 
也 可 以 取消 它 。 控 制 动 画 代码 如 下 : 
Var globalID: 
fonction animateO { 
/任意 操作 
globalID=requestAnimationFrame(animate): 
/做 动画 














} 

// 当 加 时 赛 开始 
globalID=requestAnimationFrame(animate): 
// 当 停止 

cancelAnimationFrame(globalID): 


目前 , Firefox 26+、Chrome 31+、IE 10+、Opera 19+、Safari 6+ 版 本 浏览 器 对 requestAnimationFrame | 
提供 支持 。 
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| 18.2.2 案例 :设计 进度 条 


加 绒 汪 解  。。 本 例 模拟 一 个 进度 条 动画 ， 初 始 div 宽度 为 lpx， 在 step0 函 数 中 将 进度 加 1， 然 后 再 更 新 到 div 
鲜 |] ”宽度 上 ， 在 进度 达到 100 之 前 ， 一 直 重 复 这 一 过 程 。 为 了 演示 方便 加 了 一 个 运行 按钮 ， 演 示 效果 如 


| 图 18.2 所 示 。 


| Dlocalhostestihtml x 





GC | © localhost/test1.html 


B81% 


Lao 





| 
| 
| 
| 
| 
| 几 本 全 本 半 18.2 设计 进度 条 
| 
| 示例 代码 如 下 所 示 : 
| <div id="test" style="width: 1px;height:17px:;background:#0f0;">0%</div> 
| <input type="button" value="Run" id="run"/> 
| <script> 
| window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame | 
| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame': 
| Var start = null: 
| Var ele = document.getElementById("test"); 
| Var progress = 0; 
| function step(timestamp) { 
| Progress += 1; 
| ele.style.width = progress + "%"; 
| ele.innerHTML=progress + "%"; 
| if(progress < 100) { 
| TequestAnimationFrame(step): 
} 
1， 
| requestAnimationFrame(step): 
| document.getElementById("run").addEventListener("click". functionO { 
ele.style.width = "1px": 





Pprogress = 0; 
| requestAnimationFrame(step): 
| }. false): 
| /scrip> 
18.2.3 案例: 设计 旋转 的 小 球 
视频 讲解 | 本 例 设计 通过 window.requestAnimFrame0 方 法 在 canvas 画布 中 绘制 一 个 小 球 运动 动画 ， 演 示 效 


| 果 如 图 18.3 所 示 。 
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C |QO localhosth | 





Note 





图 18.3 设计 旋转 的 小 球 动画 示例 效果 
示例 代码 如 下 所 示 : 


<style>body { margin:0px: padding:0px:}</style> 
<script> 
window.requestAnimFrame = (functionO{ 

Tetum window.requestAnimationFrame | 
window.webkitRequestAnimationFrame | 
window.mozRequestAnimationFrame ll 
window.oRequestAnimationFrame 有 
window.msRequestAnimationFrame | 
functionO{ 

window.setTimeout(callback. 1000 / 60): 


反 
D0: 
Var canVas, context; 
initO: 
animate(); 
function initO { | 
canvas = document.createElement('canvas"): 
canvas.style.left=0; 
canvas.style.top=0: 
canvas.width = 210: 
canvas.height = 210: 
context = canvas.getContext(2d"): 
document.body.appendChild( canvas ): 





} 

function animateO { 
requestAnimFrame( animate ): 
draw0: 

上 

function drawO { 
var time = new Date0.getTimeO * 0.002: 
var x = Math.sin( time ) * 96 +105: 
var y= Math.cos( time * 0.9 ) * 96 + 105: 
context.fillStyle 一 pink 
context.fillRect( 0. 0. 255. 255 ): 
context.fillStyle='rgb(255.0.0)': 
context.beginPath(): 
context.arc(x,y.10.0.Math.PI * 2.true): 
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| context.closePathO): 
| context.fill0: 
mm 
y | </script> 
全 | 
| 
18.3 Mutation Observer 


| Mutation Observer 表示 变动 观察 器 , 是 监视 DOM 变动 的 接口 。 当 DOM 对 象 树 发 生 任何 变动 时 ， 
| Mutation Observer 会 得 到 通知 。 


18.3.1 认识 Mutation Observer 


| 
| 
| Mutation Observer 类 似 于 事件 ， 可 以 理解 为 当 DOM 发 生变 动 会 触发 Mutation Observer 事件 。 但 
| 是 ， 它 与 事件 有 一 个 本 质 不 同 ， 比 较 如 下 ; 
| 事件 是 同步 触发 ， 也 就 是 说 ，DOM 发 生变 动 立刻 会 触发 相应 的 事件 。 
| Mutation Observer 则 是 异步 触发 ， DOM 发 生变 动 以 后 ， 并 不 会 马上 触发 ， 而 是 要 等 到 当前 
| 所 有 DOM 操作 都 结束 后 才 触 发 。 
| 这 样 设计 是 为 了 应 付 DOM 变动 频繁 的 情况 .例如 ,如果 在 文档 中 连续 插入 1000 个 段落 (p 元 素 )， 
| 会 连续 触发 1000 个 插入 事件 ， 执 行 每 个 事件 的 回调 函数 ， 这 很 可 能 造成 浏览 器 的 卡 顿 ， 而 Mutation 
| Observer 完全 不 同 ， 只 在 1000 个 段落 都 插入 结束 后 才 会 触发 ， 而 且 只 触发 一 次 。 
| Mutation Observer 有 以 下 特点 : 
| 等 待 所 有 脚本 任务 完成 后 才 会 运行 ， 采 用 异步 方式 。 
| 把 DOM 变动 记录 封装 成 一 个 数组 进行 处 理 ， 而 不 是 一 条 条 地 个 别处 理 DOM 变动 。 
| 回 ”可 以 观察 发 生 在 DOM 节点 的 所 有 变动 ， 也 可 以 观察 某 一 类 变动 。 
| 目前 ，Chrome 11+、Firefox 16+、IE 11 +、Opera 18+、 Safari 6+ 版 本 浏览 器 对 该 API 提供 支持 。 
| Safari 6.0 和 Chrome 18-25 使 用 这 个 API 的 时 候 ， 需 要 加 上 WebKit 前 级 (WebKitMutationObserver)。 
| 可 以 使 用 下 面 的 表达 式 检 查 浏览 器 是 否 支持 这 个 API。 
| Var MutationObserver = window.MutationObserver || 
| window. WebKitMutationObserver || 
| window.MozMutationObserver: 
| var mutationObserverSupport = !!MutationObserver: 
使 用 步骤 如 下 : 
第 1 步 ， 使 用 MutationObserver0 构 造 函 数 ， 新 建 一 个 实例 ， 同 时 指定 这 个 实例 的 回调 函数 。 


Var observer = new MutationObserver(callback): 
第 2 步 ， 使 用 observe0 方 法 指定 所 要 观察 的 DOM 元 素 ， 以 及 要 观察 的 特定 变动 。 
Var article = document.querySelector('article’): 

















Var options= { 
| 'childList: true. 
| "arttibutes': true 
| 下 
| 


‘observer.observe(article, options): 
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上 面 代码 首先 指定 所 要 观察 的 DOM 元 素 是 article， 然 后 指定 所 要 观察 的 变动 是 子 元 素 的 变动 和 | 
属性 变动 。 最 后 ， 将 这 两 个 限定 条 件 作为 参数 ， 传 入 observer 对 象 的 observe0 方 法 。 | 
窑 提示 : MutationObserver 所 观察 的 DOM 变动 ( 即 上 面 代码 的 option 对 象 ) 包含 以 下 类 型 ， 设 置 | 
值 为 布尔 值 : 
childList: 子 元 素 的 变动 。 
attributes: 属性 的 变动 。 
characterData: 节点 内 容 或 节点 文本 的 变动 。 | 
想 要 观察 哪 一 种 变动 类 型 ， 就 在 option 对 象 中 指定 值 为 true。 
除了 变动 类 型 ，option 对 象 还 可 以 设 定 以 下 属性 ， 设 置 值 为 布尔 值 : 
attributeOldValue: 如 果 为 tue， 则 表示 需要 记录 变动 前 的 属性 值 。 | 
characterDataOldValue: 如 果 为 tue， 则 表示 需要 记录 变动 前 的 数据 值 。 | 
attributesFilter: 值 为 一 个 数组 ， 表 示 需 要 观察 的 特定 属性 ， 如 ['class'\ 'str']。 | 
| 








加 加 加 加 


subtree: 所 有 下 属 节点 (包括 子 节点 和 子 节点 的 子 节点 ) 的 变动 。 

第 3 步 ， 使 用 disconnect0 方 法 来 停止 观察 。 发 生 相应 变动 时 ， 不 再 调用 回调 函数 。 
observer.disconnect(): 

第 4 步 ， 使 用 takeRecord0 方 法 来 清除 变动 记录 ， 即 不 再 处 理 未 处 理 的 变动 。 
Observer.takeRecord 


这 提示 : DOM 对 象 每 次 发 生变 化 , 就 会 生成 一 条 变动 记录 . 这 个 变动 记录 对 应 一 个 MutationRecord 
对 象 ， 该 对 象 包含 了 与 变动 相关 的 所 有 信息 。 
MutationRecord 对 象 包含 了 DOM 的 相关 信息 ， 包 含 如 下 属性 : | 
type: 观察 的 变动 类 型 ， 如 attribute、characterData 或 者 childList。 
target: 发 生变 动 的 DOM 对 象 。 
addedNodes: 新 增 的 DOM 对 象 。 
TemoveNodes: 删除 的 DOM 对 象 。 
previousSibling: 前 一 个 同 级 的 DOM 对象 ， 如 果 没 有 则 返回 null。 
nextSibling: 下 一 个 同 级 的 DOM 对 象 ， 如 果 没 有 就 返回 null。 
attributeName: 发 生变 动 的 属性 。 如 果 设 置 了 attributeFilter, 则 只 返回 预先 指定 的 属性 。 
oldValue: 变动 前 的 值 。 这 个 属性 只 对 attribute 和 characterData 变动 有 效 ， 如 果 发 生 
childList 变动 ， 则 返回 null。 
第 5 步 ， 使 用 MutationObserve 对 象 时 可 能 触发 的 各 种 事件 必须 设 定 的 MutationObserver 选项 值 
说 明 如 下 《小 括号 内 的 选项 为 可 选 选项 )。 
DOMAttrModified: attributes: true (，attributeOldValue: true ) (，attributeFilter:[ "属性 名 "]) 。 
DOMAttributeNameChanged: attributes: true (，attributeOldValue: tue) (，attributeFilter:[" 属 
性 名 "]) 。 
DOMCharactcrDataModified: characterData: true (, characterDataOldValue: true) 。 
DOMNodelnserted: childList: true (, subtree: true) 。 





回回 回回 网 图 加 加 
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DOMNode insertedlntoDocument: childList: true (，subtree: true) 。 
DOMNodeRemoved: childList: true (, subtree: true) 。 

DOMNode RemovedFrom Document: childList: true (, subtree: true) 。 
DOMSubtreeModified: childList: true, subtree: true。 


/a 
| 加 
| 回 
| 加 
| 







本 例 设计 在 页 面 中 显示 一 个 div 元 素 和 一 个 按钮 ， 单 击 该 按钮 时 JavaScript 程序 在 div 元 素 中 插 
| 入 一 个 span 元 素 。 另 外 ， 在 脚本 中 创建 一 个 MutationObserver 对 象 观察 div 元 素 的 变化 ， 将 该 对 象 的 
observe0 方 法 中 的 第 二 个 参数 值 对 象 的 childList 属性 值 设 置 为 tue， 以 观察 div 元 素 的 子 元 素 的 变化 
| (包括 在 div 元 素 中 插入 子 元 素 的 操作 )， 当 观察 到 div 元 素 中 插入 子 元 素 时 在 浏览 器 中 弹出 显示 “ 检 
| 测 到 DOM 变化 ”提示 信息 文字 ， 演 示 效 果 如 图 18.4 所 示 。 
| a 


口 ccwhosmeerlhtml x 
C © localhost/testl ht 女 | 和 
我 四 一 个 opan 元 素 陆 是 一 个 cpar 元 素 


localhost 时 示 : 3 





插 Nspan 元 志 





图 18.4 观察 DOM 元 素 变化 
示例 代码 如 下 所 示 : 
<div id="div" style="height: 100px;width:100%;background-color:pink;"></div> 
<input type="button" value=" 插 入 span 元 素 " onclick="changeDiv0:"> 
<script type="text/javascript"> 
function onchange(mutationRecords.mutationObserver) { 
alert(" 检 测 到 DOM 变化 "): 
console.log(mutationRecords): 
console.log(mutationObserver): 
} 
Var div = document.getElementById('div’); 
Var mo = new window.MutationObserver(onchange). 
options = {childList:true}: 
mo.observe(div.options): 
function changeDivO{ 
Var span=document.createElement("span"): 
span.innerHTML=" 我 是 一 个 span 元 素 "; 
div.appendChild(span): 


18.3.3 ”案例 : 观察 DOM 属性 
本 例 设计 在 页 面 中 显示 两 个 a 元 素 和 一 个 按钮 ， 单 击 该 按钮 时 ， 会 同时 修改 两 个 a 元 素 的 href 
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属性 值 。 使 用 MutationObserver 对 象 来 观察 两 个 a 元 素 ， 当 单 击 “ 修 改 a 元素” 按钮 时 ， 在 控制 台中 | 
输出 两 个 a 元 素 被 修改 的 属性 名 及 修改 前 的 href 属性 值 ， 演 示 效 果 如 图 18.5 所 示 。 








[localhostfesti btmlsb x 


€ 3 © © localhostest hm 





图 18.5 观察 DOM 属性 变化 
示例 代码 如 下 所 示 : 


<a id="al" hre 伍 "#a"> 链 接 1</a><a id="a2" hre 伍 "#"> 链 接 2</a> 
<input type="button" value=" 修 改 a 元 素 " onclick="changeAO:"> 
<script type="text/javascript"> 
function onchange(mutationRecords,mutationObserver) { 
for(var 二 0:i<mutationRecords.length:i++) 
console.log(" 修 改 前 的 "+mutationRecords[i].attributeName+" 属 性 为 :"+mutationRecords[i].oldValue); 
} 1 
Var alEl = document.getElementById(al7: 
Var a2El = document.getElementById(a2"): 
Var attr= ("href"]; 
Var mo = new window.MutationObserver(onchange), 
options = {attributes: true,attributeFilter: attr.attributeOldValue:true}: 
mo.observe(alEl.options): 
mo.observe(a2El.options): 
function changeAO{ 
alEl.setAttribute("href"."http://www.baidu.com"): 
a2El.setAttribute("href"."http://www.weibo.com"): 
} 
</script> 








18.4 在 线 练 习 


练习 HTML5 其 他 API。 
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CSS3 基础 


CSS3 在 CSS 2.1 基础 上 新 增 了 很 多 强大 功能 ， 如 园 角 、 阴 影 、 多 图 背景 、 渐 变 背景 、 
弹性 布局 、 变 形 、 动 画 、 设 备 响 应 等 。 本 章 将 简单 介绍 CSS3 的 基本 状况 ， 同 时 详细 讲解 
CSS3 新 增 的 选择 器 ， 如 果 想 设计 一 个 干净 的 、 轻 量 级 的 标签 ， 并 使 结构 与 表现 更 好 地 分 离 ， 
CSS3 选择 器 是 非常 有 用 的 。 它 可 以 让 设计 师 更 方便 地 维护 样式 表 , 减少 对 HIML 类 名 和 ID 
名 的 依赖 ， 以 及 对 HTML 结构 的 依赖 ， 使 编写 代码 更 加 简单 轻松 。 


【 学 习 重点 】 


| 


至 至 至 至 


了 解 CSS 历史 。 

了 解 CSS3 基本 状况 。 

了 解 CSS3 选择 器 。 
正确 使 用 属性 选择 器 - 

灵活 使 用 擅 类 选择 器 进行 网 页 设计 。 
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19.1 CSS3 概述 


1996 年 12 月 ，CSS 的 第 一 个 版 本 被 正式 发 布 (http://www.w3.org/TR/ICSS1/); 1998 年 5 月 , CSS | 
2.0 版 本 正式 发 布 (http:/www.w3.org/TR/CSS2/)。CSS3 的 开发 工作 在 2000 年 之 前 就 已 经 开始 ， 但 各 
方 博弈 时 间 太 久 ，2002 年 W3C 启动 了 CSS 2.1 的 开发 ， 这 是 CSS 2.0 的 修订 版 ， 它 纠正 CSS 2.0 版 | 
本 中 的 一 些 缺陷 ， 更 精确 地 描述 CSS 的 浏览 器 实现 ，2004 年 CSS 2.1 正式 发 布 ， 到 2006 年 年 底 得 到 | 
完善 ， 它 成 为 浏览 器 支持 最 完整 的 版 本 。 为 了 方便 各 主流 浏览 器 根据 需要 渐进 式 支持 ，CSS3 按 模块 | 
化 进行 全 新 设计 ， 这 些 模块 可 以 独立 发 布 和 实现 ， 这 也 为 日 后 CSS 的 扩展 黄 定 了 基础 。 


19.1.1 CSS3 模块 


CSS 1 和 CSS 2.1 都 是 单一 的 规范 , 其 中 CSS 1 主要 定义 了 网 页 对 象 的 基本 样式 ， 
如 字体 、 颜 色 、 背 景 、 边 框 等 。CSS 2 添加 了 高 级 概念 : 浮动 、 定 位 ， 以 及 高 级 选择 首 
器 ， 如 子 选择 器 、 相 邻 选择 器 和 通用 选择 器 等 。 线 上 阅读 

CSS3 被 划分 成 多 个 模块 组 ， 每 个 模块 组 都 有 自己 的 规范 。 这 样 的 好 处 是 整个 CSS3 的 规范 发 布 
不 会 因为 部 分 存在 争论 的 部 分 而 影响 其 他 模块 的 推进 。 对 于 浏览 器 来 说 ， 可 以 根据 需要 ， 决 定 哪些 
CSS 功能 被 支持 。 对 于 W3C 制定 者 来 说 ， 可 以 根据 需要 进行 针对 性 的 更 新 ， 这 样 更 容易 扩展 新 的 
技术 特性 。 

2001 年 5 月 23 日，W3C 完成 了 CSS3 的 工作 草案 ， 在 该 草案 中 制订 了 CSS3 发 国 
展 路 线 图 ， 路 线 图 详细 列 出 了 所 有 模块 ， 并 计划 在 未 来 逐步 进行 规范 。 

权威 参考 : http://www.w3.org/TR/css3-roadmap/。 人 

要 快速 了 解 各 主要 模块 内 容 和 参考 地 址 ， 请 扫 码 查看 。 和 区 当头 


将 提示 : 更 详细 的 信息 可 参见 http://www.w3.org/Style/CSS/current-work.html， 其 中 介绍 了 CSS3 具 
体 划分 为 多 少 个 模块 组 、CSS3 所 有 模块 组 目前 所 处 的 状态 ， 以 及 将 在 什么 时 候 发 布 。 


19.1.2 CSS3 开发 状态 


CSS3 每 一 个 模块 都 有 独立 的 开发 和 更 新 计划 ， 进 度 表 如 图 19.1 所 示 ， 从 该 图 可 以 看 到 CSS3 当 | 
前 发 展 的 详细 进度 。 | 
权威 参考 : http://www.w3.org/Style/CSS/current-work.html。 
其 中 Current 列表 示 模 块 当前 的 状态 ，Upcoming 列表 示 
即将 进行 的 状态 。 各 种 状态 缩写 词 说 明 如 下 : 
WD: Working Draft， 表 示 工 作 草 案 。 
回 LC: Last Call， 表 示 最 终 工 作 草案 。 
回 CR: Candidate Recommendation， 表 示 候 选 推荐 标准 。 
PR: Proposed Recommendation， 表 示 建 议 推荐 标准 。 
REC: Recommendation， 表 示 推 荐 标准 。 


次 提示 ，W3C 标准 只 是 推荐 标准 (Recommendation )， 并 没有 强制 执行 的 效力 。 不 过 ， 鉴 于 W3C | 
在 Web 标准 领域 的 影响 力 和 强大 号 召 力 ，W3C 发 布 的 推荐 标准 通常 浏览 器 厂商 们 都 很 重 
视 ， 并 积极 支持 。 
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要 了 解 W3C 标准 制作 流程 ， 请 扫 码 查看 。 
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线 上 阅读 


19.1.3 浏览 器 支持 状态 


CSS3 特性 大 部 分 都 已 经 有 了 很 好 的 浏览 器 支持 度 。 各 主流 浏览 器 对 CSS3 的 支持 越 来 越 完 善 ， 
下 面 来 了 解 一 下 两 大 平台 (Mac 和 Windows)、 五 大 浏览 器 (Chrome、Firefox、Safari、Opera 和 IE) 
对 CSS3 新 特性 和 CSS3 选择 器 的 支持 情况 。 

CSS3 属性 支持 情况 如 图 19.2 所 示 (http://fmbip.comylitmus/)。 可 以 看 出 ， 完 全 支持 CSS3 属性 
的 浏览 器 有 Chrome 和 Safari， 而 且 不 管 是 Mac 平台 还 是 Windows 平台 都 支持 。 


图 19.1 CSS3 所 有 模块 进度 表 


厅 本 有 
eeoe@ 0 5 
es ee ee ee oe 
I 
| WukiplsBacdgremds vv EXE vv XxX x x 
|E 生 区 剖 本 EF 者 开 雪 矶 区 了 豆 区 和 而 
ee eae lil lng ees 
| Box Shadow | | 
= 一 证 秆 全 各 E 了 居民 各 的 羡 的 的 号 网 时 量 
Css Columns mm 河 匠 司 区 了 





19.2 CSS3 属性 支持 列表 
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CSS3 选择 器 支持 情况 如 图 19.3 所 示 《http://fmbip.conylitmus/)。 除 了 正 家 族 和 Firefox 3， 其 他 | 
几乎 全 部 支持 。Chrome、Safari、Firefox 3.6、Opera 10.5 支持 度 最 好 。 | 


“= © O00 0 














tt 4 a | 0 0s 





ses:Root 
ss hd 
ssr ne last chad 
Gs mh of pe 
css3: nth last of ype 
sss bet child 
sss frst ot yp 
ess st- ot-ype 
sss only-cvid 
ess: only of ype 


sss: empty 

ss rget 
Csss onablod 
css3 aimated 
ss checked 


CE EY EE CY EI EY EI EES ES CA EY ES KI ES EI 
CE EE 
SIs ese iG 
Sixxxxxxxxxxxxxxxx<< 4s 


EE EE 
EE EI 
I 
EE EI 
CE 可 EE 可 对 
«lx SI SS 
本 长 避 区 司 区 司 区 司 长 司 民 引 区 司 长 一 长 司 区 司 区 可 区 司 攻 司 医 梧 区 梧 医 可 攻 避 区 可 民 
xxXXX KKININXIXIKIKIXIKX x x x x KE 
Ixix x x x x x x x x x S| 


sss: General Sloling 


图 19.3 CSS3 选择 器 支持 列表 


< 外 注意 : 各 主流 浏览 器 也 定义 大 量 私 有 属性 ， 方 便 用 户 体验 CSS3 的 新 特性 。 例 如 : 
以 Webkit 引擎 为 核心 的 浏览 器 ( 如 Safari、Chrome ) 的 私有 属性 都 以 -Webkit- 前 组 定义 ; 
以 Gecko 引擎 为 核心 的 浏览 器 (如 Firefox ) 的 私有 属性 都 以 -moz- 前 组 定义; 
以 Konqueror 引擎 为 核心 的 浏览 器 的 私有 属性 都 以 -khtml- 前 组 定义 ; 
Opera 浏览 器 的 私有 属性 以 -o- 前 组 定义 ; 


回 
回 
回 
加 ”Intermet Explorer 浏览 器 的 私有 属性 以 -ms- 前 缓 定义 ，IE 8+ 支 持 -ms- 前 级 。 


19.2 CSS3 选择 器 概述 





根据 选择 器 结构 的 不 同 ， 可 以 把 CSS 选择 器 分 为 四 大 类 : 


回 ”元素 选 择 器 ， 如 表 19.1 所 示 。 | 
关系 选择 器 ， 如 表 19.2 所 示 。 | 
属性 选择 器 ， 如 表 19.3 所 示 。 | 
伪 选 择 器 ， 包 括 伪 类 选择 器 (如 表 19.4 所 示 ) 和 伪 对 象 选择 器 (如 表 19.5 所 示 ) 。 根 据 执 | 
行 任务 不 同 ， 伪 类 选择 器 又 分 为 六 种 : | 

> ”动态 伪 类 | 

> 目标 伪 类 | 

人 
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区 
. 
先 


语言 伪 类 
结构 伪 类 
否定 伪 类 


选择 器 模块 权威 参考 : http://www.w3.org/TR/css3-selectors/。 


表 19.1 元 素 选择 器 列表 
说 明 





| 通 配 选择 器 ， 选 定 所 有 对 象 






































E | 类 型 选择 器 ， 匹 配 所 有 同类 标签 的 元 素 
a 类 选择 器 ， 匹配 class 属性 值 包含 className 的 元 素 。 注 意 ，E.className 表示 限定 元 素 
类 选择 器 
a Pai 匹配 id 属性 值 等 于 IDName 的 元 素 。 注 意 ，EfHIDName 表示 限定 元 素 ID 选 
表 19.2 关系 选择 器 列表 
选 择 器 说 了 明 
EF 分 组 选择 器 ， 同 时 匹配 E 和 下 两 个 子 选择 器 匹配 的 对 象 ， 子 选择 器 之 间 用 去 号 分 隔 
EF 包含 选择 器 ， 匹 配 所 有 被 E 元 素 包含 的 F 元 素 
E>F 子 选择 器 ， 匹 配 E 元 素 的 所 有 子 元 素 F 
E+F 相 邻 选 择 器 ， 匹 配 紧 贴 在 E 元 素 之 后 的 元素， 元 素 E 与 F 必须 同属 一 个 父 级 
二 兄弟 选择 器 , 匹配 E 元 素 后 面 的 所 有 兄弟 元 素 F, 元 素 EE 与 必须 同属 一 个 父 级 。CSS3 
新 增 
表 19.3 属性 选择 器 列表 
选 择 器 说 明 
E[att] 匹配 具有 att 属性 的 E 元 素 。 注 意 ，E 可 以 省 略 ， 如 [cheacked]， 以 下 相同 
El[att="val"] 匹配 具有 att 属性 ， 且 属性 值 等 于 val 的 E 元 素 
Bi 匹配 具有 att 属性 ， 且 属 性 值 为 一 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 val 的 EE 元 素 。 
注意 ， 包 含 只 有 一 个 值 且 该 值 等 于 val 的 情况 
Elatt_"val"] 匹配 具有 att 属性 ， 其 值 是 以 val 开头 并 用 连接 符 “-” 分 隔 的 字符 串 的 E 元 素 。 注 意 ， 
如 果 值 仅 为 val， 也 将 被 选择 
Ef[att*="val"] 匹配 具有 att 属性 ， 且 属性 值 为 以 val 开头 的 字符 串 的 EE 元 素 。CSS3 新 增 
E[att$="val"] 匹配 具有 att 属性 ， 且 属性 值 为 以 val 结尾 的 字符 串 的 E 元 素 。CSS3 新 增 
E[att*="val"] 匹配 具有 att 属性 ， 且 属性 值 为 包含 val 的 字符 串 的 E 元 素 。CSS3 新 增 








忘 提示 : CSS 支持 并 列 使 用 多 个 属性 选择 器 ， 以 匹配 同时 满足 多 个 选择 器 ， 如 blockquote[class= 


quote][cite] { color:#f00; }. 


"382。 


第 19 章 CSS3 基 下 “一 人 CO 
RD | 
































| 
表 19.4 ” 伪 类 选择 器 列表 | 
选 择 器 说 明 | 
E:link 设置 超 链接 a 在 未 被 访问 前 的 样式 | 
E:visited 设置 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 | 
E:hover 设置 元 素 在 其 鼠标 悬 停 时 的 样式 | 
E:active 设置 元 素 在 被 用 户 激活 〈 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
E:focus 设置 对 象 在 成 为 输入 焦点 时 的 样式 
E:lang(fr) 匹配 使 用 特殊 语言 的 EE 元素 
E:not(s) 匹配 不 含有 s 选择 符 的 元 素 E。CSS3 新 增 
E:root 匹配 E 元 素 在 文档 的 根 元素 。 在 HTML 中 ， 根 元 素 永远 是 HTML。CSS3 新 增 
E:first-child 匹配 父 元 素 的 第 一 个 子 元 素 E。CSS3 新 增 
E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 E。CSS3 新 增 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 E。CSS3 新 增 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 
E:nth-last-child(n) 匹配 父 元 素 的 倒数 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 
E:first-of-type 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:last-of-type 匹配 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E。CSS3 新 增 


E:only-of-type 匹配 同类 型 中 的 唯一 的 一 个 同 级 兄弟 元 素 E。CSS3 新 增 


E:nth-of-type(n) 匹配 同类 型 中 的 第 mn 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:nth-last-of-type(n) | 匹配 同类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E。CSS3 新 增 








E:empty 匹配 没有 任何 子 元 素 ( 包 括 text 节点 ) 的 元 素 E。CSS3 新 增 
匹配 用 户 界面 处 于 选中 状态 的 元 素 E。 注意 , 用 于 input 的 type 为 radio 与 checkbox 时 。 

E:checked CSS3 新 增 
E:enabled 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 E。CSS3 新 增 
E:disabled 匹配 用 户 界面 上 处 于 禁用 状态 的 元 素 E。CSS3 新 增 
E:target 匹配 相关 URL 指向 的 E 元 素 。CSS3 新 增 
@page :first 设置 在 打印 时 页 面容 器 第 一 页 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
@page :left 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 

age :right 设置 页 面容 器 位 于 装订 线 右 边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 





表 19.5 伪 对 象 选择 器 列表 
选 择 器 说 阴 





Ei:first-letter/E::first-letter | 设置 对 象 内 的 第 一 个 字符 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 
E:first-line/E::first-line ”设置 对 象 内 的 第 一 行 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 








设置 在 对 象 前 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 。 
CSS3 完善 


E:before/E::before 











设置 在 对 象 后 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 。 
E:after/E::after i 
CSS3 完善 
E::placeholder | 设置 对 象 文字 占 位 符 的 样式 。CSS3 新 增 
E::selection 设置 对 象 被 选择 时 的 样式 。CSS3 新 增 
< 全 注意 : CSS3 将 擅 对 象 选择 符 前 面 的 单个 冒号 (: ) 修改 为 双 冒 号 (:: )， 用 以 区 别 伪 类 选择 符 ,但 
以 前 的 写法 仍然 有 效 。 
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19.3 使 用 CSS3 选择 器 


当 把 两 个 或 多 个 简单 的 选择 器 组 合 在 一 起 ， 就 形成 了 一 个 复杂 的 选择 器 ， 通 过 组 合 选择 器 可 以 设 


Note 计 高 级 选择 器 ， 精 准 匹配 页 面 对 象 。 下 面 针 对 CSS3 新 增 选择 进行 说 明和 示例 演示 。 








| 19.3.1 兄弟 选择 器 


兄弟 选择 器 通过 波浪 符号 〈~) 标识 符 进行 定义 ， 语 法 格式 如 下 : 
EF {sRules} 
其 基本 结构 是 第 一 个 选择 器 指定 同 级 前 置 元 素 , 后 面 的 选择 器 指定 其 后 同 级 所 有 匹配 元 素 。 前 后 





选择 符 的 关系 是 兄弟 关系 ， 即 在 HTML 结构 中 两 个 标签 前 为 兄 、 后 为 弟 ， 否 则 样式 无 法 应 用 。 


【示例 】 下 面 是 一 个 简单 的 示例 ， 具 体 样式 代码 如 下 : 


<style type="text/css"> 

族 相 邻 选择 (E+F) */ 

h3 +p { color: #00f: font-size:24px: } 

谨 兄弟 选择 (E~F) */ 

h3~p {color: #f00; } 

</style> 

<div class="header"> 
<h3> 关 系 选择 器 </h3> 
<p>E.F: 分 组 选择 器 ， 同 时 匹配 E 和 下 两 个 子 选择 器 匹配 的 对 象 ， 子 选择 器 之 间 用 逗号 分 隔 。</p> 
<p>EF: 包含 选择 器 ， 匹 配 所 有 被 EE 元 素 包含 的 F 元 素 。</p> 
<p>E >F: 子 选择 器 ， 匹 配 EE 元 素 的 所 有 子 元 素 F。</p> 
<p>E +F: 相 邻 选择 器 ， 匹 配 紧 贴 在 王 元 素 之 后 F 元 素 ， 元 素 下 与 必须 同属 一 个 父 级 。</p> 
<p>E ~F: 兄弟 选择 器 ， 匹 配 E 元 素 后 面 的 所 有 兄弟 元 素 E， 元 素 卫 与 下 必须 同属 一 个 父 级 。CSS3 新 


。<jp> 


</div> 
兄弟 选择 器 能 够 选择 前 置 元 素 后 同 级 的 所 有 匹配 元 素 , 而 相 邻 选择 器 只 能 选择 前 置 元 素 后 相 邻 的 


一 个 匹配 元 素 。 在 浏览 器 中 预览 ， 效 果 如 图 19.4 所 示 。 可 以 看 到 第 1 段 文 本 应 用 了 “color: #f00;” 和 
“font-size:24px;”， 后 面 4 段 文 本 应 用 了 “color: #f00;”， 说 明 “h3 + p { color: #00f; font-size:24px; }” 
| 仅 作用 于 第 一 段 文本 ， 而 “h3 ~p { color: #00; }” 作 用 于 所 有 段落 文本 。 





关系 选择 器 
E,F: 分 组 选择 器 ， 同 时 匹配 E 和 F 两 个 子 选择 器 匹配 的 对 象 ， 子 选择 
号 分 陋 。 


E+F: [本 和 紧 i 元 委 , 元 
瑟 --F。 兄 关 笑 择 器 ， 匹 配 E 元 素 后 面 的 所 有 兄弟 元 委 F， 





图 19.4 兄弟 选择 器 和 相 邻 选 择 器 比较 
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好 
19.3.2 属性 选择 器 


属性 选择 器 早 在 CSS2 中 就 被 引入 , 如 Elattr]、 Efatt="value"]、 E[attr~="value"] 和 E[attr|="value"]。 | 
CSS3 在 此 基础 上 新 增加 了 3 个 属性 选择 器 ， 如 E[attr^="value"]、E[attr$="value"] 和 E[attr*="value"]。 | 
其 与 已 定义 的 4 个 属性 选择 器 ， 构 成 了 强大 的 HTML 属性 过 滤器 。 | 
属性 选择 器 以 中 括号 作为 语法 标识 符 ， 在 中 括号 中 可 以 包含 HTML 属性 名 或 者 属性 值 ， 并 通过 
“^”“$”“|” 等 运算 符 定义 不 同形 式 的 属性 选择 器 ， 语 法 格式 如 下 : 
[属性 选择 符 ] 


CSS3 属性 选择 器 的 具体 说 明 可 以 参考 表 19.3， 下 面 结合 具体 示例 进行 演示 。 
【示例 1】 下 面 示例 为 所 有 包含 href 属性 的 超 链接 定义 背景 色 。 


<style type= "text/css"> 

a[href] { background-color: #009966: ”上 # 设置 背景 色 */} 
</style> 

<p><a name="anchor"> 存 在 属性 href 才 行 </a></p> 

<p><a hre 仁 "#"> 存 在 属性 href 才 行 </a></p> 


【示例 2】 下 面 示例 为 表单 元 素 类 型 为 文本 框 (type=text) 的 元 素 设 置 背景 色 。 


<style type="text/css"> 

input[type=text] { background: #CC6633/* 设置 背景 色 */} 
</style> 

<p><input type="text"> 属 性 值 为 text 才 行 </p> 

<p><input type="textarea"> 属 性 值 为 text 才 行 <p> 


【示例 3】 下 面 示例 为 类 选择 器 设置 背景 色 样式 。 这 里 class 属性 包含 多 个 值 ， 每 个 值 之 间 用 空 
格 分 隔 ， 其 中 包括 first。 


<style type="text/css"> 
[class~=first] { background: #0099FF 。 /* 设置 背景 色 */} 
</style> 
<u> 
<li class="first"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="second"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="third"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="first second"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="first third"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="second third"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
<li class="first second third"> 属 性 值 中 存在 或 者 含有 first 需要 空格 分 隔 </li> 
</ul> 


【示例 4】 本 例 匹 配 class 属性 值 中 包含 first 字符 串 单元 ， 且 多 个 字符 串 之 间 用 连 字符 分 为 匹配 | 
的 标签 设置 背景 色 。 
<style type="text/css"> 
[class|="first"] { background-color: #66CC33 /* 设置 背景 色 */} 
</style> 











<!-- 结 构 与 示例 3 相同 -> 
【示例 35】 下 面 示例 为 <p> 标 签 中 定义 提示 属性 tile， 且 值 以 good 开头 设置 背景 色 。 
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<style type="text/css"> 
pltitle^="good"] { background-color: #CC6666 ”/* 设置 背景 色 */} 
</style> 
<p title="hello"> 属 性 的 开头 必须 是 good</p> 
全 | <ptitle="goodmor"> 属 性 的 开头 必须 是 good</p> 
一 一 <ptitle="Tgoodmor"> 属 性 的 开头 必须 是 good</p> 


【示例 6】 下 面 示例 为 提示 属性 title 的 值 以 bye 结尾 的 <p> 标 签 设置 背景 色 。 


| <style type="text/css"> 

| pltile$="bye"] { background-color: #009933 /* 设置 背景 色 */} 
| </style> 

| <p title="hello"> 属 性 中 bye 需要 在 末尾 </p> 

| <p title="goodbye"> 属 性 中 bye 需要 在 末尾 </p> 

| <p tile="goodbye-2"> 属 性 中 bye 需要 在 末尾 </p> 
| 


【示例 7】 在 下 面 示例 中 分 别 定义 了 5 个 模糊 匹配 的 属性 选择 器 ， 然 后 把 匹配 的 div 元 素 显示 出 
| 来 以 测试 浏览 器 是 否 支 持 该 属性 选择 器 ， 如 图 19.5 所 示 。 





<style type= "text/css"> 

div { display: none: }/* 隐藏 所 有 div 元 素 */ 

[classj="blue"] { display: block: }/* 连 字符 匹配 */ 

[class~="blue"] { display: block; }/* 空白 符 匹 配 */ 

[class^="Red"] { display: block: }/* 前 组 匹配 */ 

[class$="Green"] { display: block: }/* 后 缀 匹配 */ 

[class*="gre"] {display: block: }/* 子 字符 串 匹配 */ 

</style> 

<div class="red-blue-green"> 支 持 [|=]〈 连 字符 匹配 属性 选择 器 </div> 
<div class="red blue green"> 支 持 [一 ] (空白 符 匹 配 ) 属性 选择 器 </div> 
<div class="Red-blue-green"> 支 持 [^] (前 级 匹配 ) 属性 选择 器 </div> 
<div class="red-blue-Green"> 支 持 [$=] (后 缀 匹配 ) 属性 选择 器 </div> 
<div class="red-blue-green"> 支 持 [*=]:( 子 字符 串 匹 配 ) 属性 选择 器 </div> 





图 19.5 模糊 匹配 属性 选择 器 演示 效果 
| 容 提示 如 果 省 略 了 属性 选择 器 的 指定 标签 选择 器 ， 这 时 它 将 匹配 任意 标签 元 素 。 


19.3.3” 伪 类 选择 器 







杭 频 讲解 | 。。 伪 类 是 一 种 特殊 的 类 选择 器 ， 它 的 用 处 就 是 可 以 对 不 同 状态 或 行为 下 的 元 素 定义 样式 , 这 些 状态 
| 或 行为 是 无 法 通过 静态 的 选择 器 匹配 的 ， 具 有 动态 特性 。 
| 。。 伪 类 选择 器 以 时 号 〈:) 作为 语法 标识 符 。 冒 号 前 可 以 添加 选择 符 ， 限 定 伪 类 应 用 的 范围 ， 册 号 
| 后 为 伪 类 名 称 ， 冒 号 前 后 没有 空格 。 语 法 格式 如 下 
: 伪 关 名 称 


。386 。 


第 19 幸 CSS3 基 础 一 ES 


Css 伪 类 选择 器 有 两 种 用 法 方式 : 
回 单纯 式 
E:pseudo-class { property:value} | 
其 中 了 为 元 素 , pseudo-class 为 伪 类 名 称 , property 是 CSS 的 属性 , value 为 CSS 的 属性 值 。 例如: 
alink {color:red:} | 
回 混用 式 
E.class:pseudo-class {property:value} 
其 中 .class 表示 灶 选 择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复杂 | 

的 样式 ， 以 精准 匹配 元 素 。 例 如 ， | 
a.selected:hover {color: blue;} 


在 19.4 节 案例 实战 部 分 ， 将 会 演示 多 种 不 同 伪 类 选择 器 的 应 用 。 
19.3.4” 伪 对 象 选择 器 

伪 对 象 选择 器 主要 针对 不 确定 对 象 定义 样式 , 如 第 一 行文 本 、 第 一 个 字符 、 前面 内 容 、 后 面 内 容 。 
这 些 对 象 具体 存在 ， 但 又 无 法 具体 确定 ， 需 要 使 用 特定 类 型 的 选择 器 来 匹配 它们 。 

伪 对 象 选择 器 以 冒号 〈:) 作为 语法 标识 符 。 冒 号 前 可 以 添加 选择 符 ， 限 定 伪 对 象 应 用 的 范围 ， 
冒号 后 为 伪 对 象 名 称 ， 冒 号 前 后 没有 空格 。 语 法 格式 如 下 

: 伪 对 象 名 称 

CSS3 新 语法 格式 如 下 : 

:: 伪 对 象 名 称 
容 提示 : 擅 对 象 前 面包 含 两 个 冒号 ， 主 要 是 为 了 与 伪 类 选择 器 进行 语法 区 分 。 

【示例 1】 下 面 示例 使 用 “:before” 伪 对 象 选择 器 在 段落 文本 前 面 添加 三 个 字符 “ 柳 永 : ”， 然 后 


使 用 “:first-letter” 伪 对 象 选择 器 设置 段落 文本 第 一 个 字符 放大 显示 ， 定 义 字 体 大 小 为 24 像素 ， 则 效 | 
果 如 图 19.6 所 示 。 | 








<style type="text/css"> | 
pibefore { content: ' 柳 永 : ':} ! 
Pp:first-letter { font-size:24px:} | 





</style> 
<p> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。</p> 





图 19.6 定义 第 一 个 字符 放大 显示 


【示例 2】 下 面 示例 使 用 “:first-letter” 伪 对 象 选择 器 设置 段落 文本 第 一 个 字符 放大 下 沉 显示 ， 并 
使 用 “:firstline” 伪 对 象 选 择 器 设置 段落 文本 第 一 行 字符 放大 带 有 阴影 显示 ， 则 效果 如 图 19.7 所 示 。 
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& 2 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


<style type="text/css"> 
Pp{ font-size:18px: line-height:1.6em; 
pifirst-letter {/* 肌 芝 六 朱 中 瘦 “个 字符 样 式 和 


ote 国生 二 交 生 二 和 
P:first-line {/* 段落 文本 中 第 一 行 字符 样式 */ 


colorred: 

font-size:24px; 

text-shadow:2px 2px 2px rgba(147,251.64,1); 
} 
</style> 


<p> 我 在 膀胱 中 ， 眼 前 展开 一 片 海边 眉 绿 的 沙 地 来 ， 上 面 深蓝 的 天 空中 挂 着 一 轮 金黄 的 圆 月 。 我 想 : 希望 本 
是 无 所 谓 有 ， 无 所 谓 无 的 。 这 正如 地 上 的 路 ， 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 </p> 


2 -加 | 3 ET 
在 瞳 胱 中， 眼前 展开 一 片 海边 匆 绿 的 沙 地 来 ， 上 面 在 膀 腕 中 ， 眼 前 展开 一 片 海边 牙 绿 的 沙 


的 天 空中 挂 着 一 轮 爹 黄 的 国 月， 我 想 : 希望 本 是 无 所 谓 有 ， 无 所 谓 无 的 , 地 来 ， 上 面 深蓝 的 天 空中 挂 着 一 轮 会 黄 的 贺 月 , 我 
这 正如 地 上 的 路 ， 其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 起 : 希望 本 是 无 所 谓 有 ， 无 所 谓 无 的 ， 这 正如 地 上 的 
路 :其 实地 上 本 没有 路 ， 走 的 人 多 了 ， 也 便 成 了 路 。 





图 19.7 定义 第 一 个 字符 和 第 一 行 字符 特殊 显示 


19.4 案例 实战 


下 面 以 案例 形式 练习 CSS3 选择 器 的 应 用 。 
19.4.1 设计 按钮 样式 
动态 伪 类 是 一 类 行为 类 样式 ， 只 有 当 用 户 与 页 面 进行 交互 时 有 效 。 包 括 两 种 形式 : 
锚 点 伪 类 ， 如 “:link”“:visited”。 
行为 伪 类 ， 如 “:hover”“:active”“:focus”。 
下 面 示 例 将 使 用 动态 伪 类 选择 器 设计 一 组 3D 动态 效果 的 按钮 样式 ， 效 果 如 图 19.8 所 示 。 





x 
©- Gre sc|So" ”去 


Ee Faaaa -as 








| 
| 线 上 阅读 图 19.8 设计 3D 按钮 样式 
| 具体 操作 步骤 请 扫 码 学 习 。 
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19.4.2 ”设计 列表 样式 


结构 伪 类 根据 文档 结构 的 相互 关系 来 匹配 特定 的 元 素 , 从 而 减少 文档 元 素 的 class 属性 和 ID 属性 | 
的 无 序 设置 ， 使 得 文档 更 加 简洁 。 : 
结构 伪 类 形式 多 样 ， 但 用 法 固定 ， 以 便 设 计 各 种 特殊 样式 效果 ， 结 构 伪 类 主要 包括 下 面 几 种 , 简 | 
单 说 明 如 下 所 示 : 
:first-child: 第 一 个 子 元 素 。 
:last-child: 最 后 一 个 子 元 素 。 
:nth-child(): 按 正 序 匹配 特定 子 元 素 。 
:nth-last-child0: 按 倒序 匹配 特定 子 元 素 。 
:nth-oftype0: 在 同类 型 中 匹配 特定 子 元 素 。 
:nth-last-of-type0: 按 倒序 在 同类 型 中 匹配 特定 子 元 素 。 
:first-of-type: 第 一 个 同类 型 子 元 素 。 
:last-of-type: 最 后 一 个 同类 型 子 元 素 。 
:only-child: 唯一 子 元 素 。 
:only-of-type: 同类 型 的 唯一 子 元 素 。 
:empty: 空 元 素 。 
“ 面 示例 设计 排行 榜 栏 目 列表 样式 ， 设 计 效 果 如 图 19.9 所 示 。 
气旋 多 
双 周 热门 推荐 
送 君 千里 终 须 一 别 


固 旅行 的 意 





因 办 办 办 办 因 国 办 多国 凶 


| 


南 师 虽 去 ， 精 神 永存 


话 壬 鸭 米 妮 


国 阿尔 及 利 下 天 命 之 年 


白菜 鸡肉 粉 毕 包 
《展望 党 上 的 杀人 办 
我 们 ， 只 会 在 路 上 相遇 





19.9 设计 列表 样式 
具体 操作 步骤 和 详细 说 明 请 扫 码 学 习 。 


19.4.3 设计 表格 样式 








否定 选择 器 只 有 一 个 一 一 “:not0”， 使 用 它 可 排除 或 者 过 滤 掉 特定 元 素 。 | 

在 下 面 示例 中 设计 一 个 分 层 表格 样式 ， 借 助 否定 伪 类 选择 器 和 结构 伪 类 选择 器 ， 配 合 CSS 背景 | 
图 像 设计 树 形 结构 标志 ; 借助 伪 类 选择 器 设计 鼠标 经 过 时 的 动态 背景 效果 ， 利 用 CSS 边框 和 背景 色 
设计 标题 行 的 立体 显示 效果 。 演 示 效 果 如 图 19.10 所 示 。 


"。389 。 
























ET 证 局 
Co ee 0]0 -13 -ml na 
| 
区 说 本 
过 反共 十 元 素 的 第 一 个 于 元 条 * 
莲 树 怀 个 元 素 汐 县 后 一 个 了 元素 
选择 一 个 上 她 元 束 下 的 孽 一 个 同 夫 于 元 京 。 
和 飞 直 上 元 天 的 最 后 一 个 夫 于 元 于- 
Ere 可 
六 的 上 抽 元 家 8 一 一 个 相同 上 9 子 元 素 。 


有 


和 申 元 素 的 一 个 或 人 个 村 定 的 子 元 系 。 
这 拉 革 元 素 的 -个 或 序 个 村 十 的 于 元 系 ， 从 这 个 元 素 的 各 后 个 于 元 家 开 地 竺 。 
i 

这 时 拓 家 的 元 要 ， 欠 元 区 忌 后 一 个 开 妈 计算。 











图 19.10 设计 表格 样式 
具体 操作 步骤 请 扫 码 学 习 。 


19.4.4 设计 表单 样式 


CSS3 新 定义 了 3 种 常用 UI 状态 伪 类 选择 器 。 简 单 说 明 如 下 : 
回 :enabled 
“:enabled” 伪 类 表示 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 在 网 页 中 , UI 元 素 一 般 是 指 包 含 在 form 
元 素 内 的 表单 元 素 。 例 如 ， 在 下 面 表单 结构 中 ，input:enabled 选择 器 将 匹配 文本 框 ， 但 不 匹配 该 表单 
中 的 按钮 。 
<form> 
<input type="text" /> 
<input type="button" disabled="disabled" /> 
</form> 





回 :disabled 
“:disabled” 伪 类 表示 匹配 指定 范围 内 所 有 不 可 用 UI 元 素 .例如 ,在 下 面 表单 结构 中 ,input:disabled 
选择 器 将 匹配 按钮 ， 但 不 匹配 该 表单 中 的 文本 框 。 
<fom> 
<input type="text" /> 
<input type="button" disabled="disabled" /> 
</form> 
回 :checked 
“:checked” 伪 类 表示 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 例如 , 在 下 面 表单 结构 中 , input:checked 
选择 器 将 匹配 片段 中 的 单 选 按钮 ， 但 不 匹配 该 表单 中 的 复 选 框 。 
<form> 
<input type="checkbox" /> 
<input type="radio" checked="checked" /> 
</form> 
在 表单 中 ， 这 些 状态 伪 类 是 比较 常用 的 ， 最 常见 的 type="text" 有 enable 和 disabled 两 种 状态 ， 前 
者 为 可 写 状 态 ， 后 者 为 不 可 写 状 态 。 另 外 ，type="radio" 和 type="checkbox" 有 checked 和 unchecked 两 
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【示例 】 在 下 面 示例 中 ,将 设计 一 个 简单 的 登录 表单 ， 为 便于 观察 ， 同 时 使 用 一 个 不 可 用 的 表单 | 
对 象 进行 比较 。 演 示 效 果 如 图 19.11 所 示 。 在 实际 应 用 中 ， 当 用 户 登 录 完毕 ， 不 妨 通过 脚本 把 文本 框 | 
设置 为 不 可 用 (disabled="disabled") 状态 ， 这 时 可 以 通过 “:disabled” 选 择 器 让 文本 框 显示 为 灰色 ， 
以 告诉 用 户 该 文本 框 不 可 用 ,这样 就 不 用 设计 “不 可 用 ”样式 类 ， 同 时 把 该 类 添加 到 HTML 结构 中 。 




















图 19.11 设计 登录 表单 样式 
具体 操作 步骤 请 扫 码 学 习 。 
19.4.5 设计 锚 点 样式 
目标 伪 类 选择 器 类 型 形式 如 E:target， 它 表示 选择 匹配 E 的 所 有 元 素 ， 且 匹配 元 素 被 相关 URL 指 
向 。 该 选择 器 是 动态 选择 器 ， 只 有 当 存 在 URL 指向 该 匹配 元 素 时 ， 样 式 效果 才能 够 有 效 。 


【示例 】 下 面 示例 设计 当 单 击 页 面 中 的 锚 点 链接 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 自动 高 亮 显 
示 ， 以 提醒 用 户 当前 跳 转 的 位 置 ， 效 果 如 图 19.12 所 示 。 





» [CT 








19.12 目标 伪 类 样式 应 用 效果 





具体 代码 解析 请 扫 码 学 习 。 
19.4.6 ”设计 超 链接 样式 
在 下 面 示例 中 ， 将 模拟 百度 文库 的 “相关 文档 推荐 ”模块 样式 设计 效果 ， 演 示 如 何 利 用 属性 选择 


器 快速 并 准确 匹配 文档 类 型 ， 为 不 同类 型 文档 超 链接 定义 不 同 的 显示 图 标 ， 以 便 浏 览 者 准确 识别 文档 
类 型 。 示 例 演 示 效 果 如 图 19.13 所 示 。 
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图 19.13 ”设计 超 链接 文档 类 型 的 显示 图 标 
具体 操作 步骤 请 扫 码 学 习 。 


19.5 在 线 练 习 


灵活 使 用 CSS， 强 化 基本 功 训练 。 
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CSS3 文本 样式 


CSS3 优化 和 增强 了 CSS 2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具 表 现 力 和 感染 力 ， 丰 
富 了 网 页 文本 的 样式 和 版 式 。 用 户 可 以 使 用 网 络 字体 定义 特殊 的 字体 类 型 ， 摆 脱 了 浏览 器 所 
在 系统 字体 的 局 限 ; 可 以 选择 更 多 的 色彩 模式 ， 创 建 灵活 的 网 页 配色 体系 ; 通过 文本 阴影 ， 
让 字体 看 起 来 更 美 ; 通过 动态 内 容 ， 让 网 页 内 容 不 再 单一 ，CSS 控制 网 页 内 容 的 显示 能 力 
更 强 。 


【 学 习 重点 】 

了 解 CSS3 文本 模块 。 

正确 处 理 文本 溢出 和 换行 问题 。 
能 够 使 用 CSS3 新 色彩 模式 。 
灵活 定义 文本 阴影 样式 。 
灵活 添加 动态 内 容 。 
正确 使 用 网 络 字体 。 


至 至 至 至 至 坚 
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| 
| & 
| 20.1 CSS3 文本 模块 
去 
人 二 | 
早期 css 文本 功能 就 是 设置 字体 、 字 号 、 颜 色 、 样 式 、 粗 细 、 间 距 等 。CSS3 的 文本 功能 不 再 局 
限于 这 些 基 本 设置 ， 它 优化 了 已 经 存在 的 各 个 属性 ,整合 了 各 种 不 兼容 的 私有 属性 ， 给 文本 添加 一 些 
高 级 属性 ， 并 作为 一 个 独立 的 模块 进行 开发 ， 以 尽快 完善 和 先 代 CSS 文本 功能 。 


| 20.1.1 文本 模块 概述 


CSS3 文本 模块 (TextModule ) 把 与 文本 相关 的 属性 单独 进行 规范 。 文本 模块 的 最 早 版 本 是 在 2003 
年 制定 的 《http:/www.w3.org/TR/2003/CR-css3-text-20030514/ )，2005 年 对 其 进行 了 修订 http:// 
www.w3.org/TR/2005/WD-css3-text-20050627/ ) ，2007 年 又 进行 了 系统 更 新 http://www.w3.org/ 
TR/2007/WD-css3-text-20070306/ )， 最 后 形成 了 一 个 较为 完善 的 文本 模型 (http://www.w3.org/TR/ 
css3-text/)。 

在 最 终 版 本 的 文本 模块 中 ， 除 了 新 增 文本 属性 外 ， 还 对 CSS 2.1 版 本 中 已 定义 的 属性 取 值 进行 修 
补 ， 增 加 了 更 多 的 属性 值 ， 以 适应 复杂 环境 中 文本 的 呈现 。 

与 2003 年 版 本 相 比 ， 进 行 了 较 大 的 改动 ， 其 中 主要 改动 说 明 如 下 。 
line-break 和 word-break-cjk 属性 被 word-break 属性 蔡 换 。 
word-break-inside 属性 被 hyphenate 属性 蔡 换 。 
wrap-option 属性 被 text-wrap 和 word-break 属性 蔡 换 。 
linefeed-treatment、white-space-treatment 和 all-space-treatment 属性 被 white-space-collapse 属 
性 替换 。 
min-font-size 和 max-font-size 属性 被 移 到 下 一 个 CSS3 版 本 的 字体 模块 内 。 
修改 了 text-align 属性 中 left 和 right 属性 值 在 垂直 文本 中 的 行为 。 
text-align-last 属性 取消 了 size 属性 值 。 
text-justify 属性 取消 了 newspaper 属性 值 。 
word-spacing 和 letter-spacing 属性 增加 了 百分比 取 值 。 
text-wrap 属性 增加 了 suppress 属性 值 。 
删除 linefeed-treatment 属性 。 
text-align-last 属性 取消 了 size 属性 值 。 
text-justify 属性 新 增 了 tibetan 属性 值 。 
punctuation-trim 属性 新 增加 了 end 属性 值 。 
keming-mode:contextual 被 punctuation-trim:adjacent 蔡 换 ， 其 他 控制 被 移 至 字体 模块 。 
text-shadow 属性 现在 可 以 继承 。 

新 增 text-outline 属性 。 

新 增 text-emphasis 属性 ， 蔡 换 font-emphasis 属性 。 

| 重新 定义 了 text-indent 属性 。 

| 重新 设计 了 hanging-punctuation 属性 。 

| 最 新 版 本 的 文本 模型 与 2005 年 版 本 相 比 ， 也 进行 了 适当 修订 ， 其 中 增加 text-emphasis 和 
| text-outline 属性 ， 移 除了 font-emphasis 属性 ， 其 他 更 多 改动 细节 请 参阅 官方 文档 。 
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20.1.2 文本 溢出 


text-overflow 属性 可 以 设置 超 长 文本 省 略 显示 。 基 本 语法 如 下 所 示 。 

text-overflow:clip | ellipsis 

适用 于 块 状元 素 ， 取 值 简单 说 明 如 下 : 

回 clip: 当 内 联 内 容 溢出 块 容器 时 ， 将 溢出 部 分 裁 切 掉 ， 为 默认 值 。 | 

ellipsis: 当 内 联 内 容 溢出 块 容器 时 ， 将 溢出 部 分 蔡 换 为 ...〉。 | 

寥 提示 : 在 早期 W3C 文档 (http://www.w3.org/TR/2003/CR-css3-text-20030514/#textoverflow-mode ) 

中 ，text-overflow 被 纳入 规范 ， 但 是 在 最 新 修订 的 文档 ( http://www.w3.org/TR/css3-text/ ) 
中 没有 再 包含 text-overflow 属性 。 


由 于 W3C 规范 放弃 了 对 text-overflow 属性 的 支持 ， 所 以 ，Mozilla 类 型 浏览 器 也 放弃 了 对 该 属性 
的 支持 。 不 过 ，Mozilla developer center 推荐 使 用 -moz-binding 的 CSS 属性 进行 兼容 。Firefox 浏览 器 | 
支持 XUL (XUL， 一 种 XML 的 用 户 界面 语言 )， 这 样 就 可 以 使 用 -moz-binding 属性 来 绑 定 XUL 里 的 | 
ellipsis 属性 了 。 
4 注意 : text-overflow 属性 仅 是 内 容 注解 ， 当 文本 溢出 时 是 否 显示 省 略 标记 ， 并 不 具备 样式 定义 的 
特性 。 要 实现 溢出 时 产生 省 略 号 的 效果 ， 还 应 定义 两 个 样式 : 强制 文本 在 一 行内 显示 
( white-space:nowrap ) 和 溢出 内 容 为 隐藏 ( overflow:hidden )， 只 有 这 样 才 能 实现 溢出 文 
本 显示 省 略 号 的 效果 。 
【示例 】 下 面 示例 设计 新 闻 列 表 有 序 显示 ， 对 于 超出 指定 宽度 的 新 闻 项 ， 则 使 用 text-overflow 属 
性 省 略 并 附加 省 略 号 ， 避 免 新 闻 换 行 或 者 撑 开 版 块 ， 演 示 效 果 如 图 20.1 所 示 。 








© ET E 
ES 


全 内 看 拓 己 ， 天 下 天 比 领 。 二 于 为 《议和 少 前 之 
司 大 和 读者 出 ， 二 月 看 网 人 的 刀 。 计 涡 类 训 《 
司 全 3 于 日, 更 上 于 和 


本 天 区 村 ， 江 再 户 六 入， 而 示 江 兴 ( 窗 寻 德 了 
司 大江 角 扣 寺 ， 攻 六 日 加 吝 王 二 《全 要 上 





图 20.1 设计 固定 宽度 的 新 闻 栏目 | 
示例 代码 如 下 : 
<style type="text/css"> 
dl {定义 新 闻 栏目 外 框 ， 设 置 固定 宽度 */ 
width:300px: 
border:solid 1px #ccc: 


} 

dt {/* 设 计 新 闻 栏目 标题 行 样式 */ 
padding:8px 8px: 证 增加 文本 周围 空隙 */ 
margin-bottom:12px: 片 调整 底部 间距 */ 
background:#7FECAD url(images/green.gif) repeat-x: 。” 族 设 计 标 题 栏 背景 图 */ 
刻 定 义 字体 样式 */ 
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2 0 从 入 门 到 精通 ( 微 课 精 编 版 ) 
| v 
| be 


| font-size:13px: font-weight:bold: color:#71790C: 
| text-align:left: 访 恢 复 文 本 默认 左 对 齐 */ 
| border-bottom:solid 1px #efefef: 刻 定 义 浅 色 边框 线 */ 


| J. 
| dd {/* 设 新 闻 列表 项 样式 */ 
到 | font-size:0.78em:; 
# 固 定 每 个 列表 项 的 大 小 所 

height LSem widihs280ps; 

| 为 添加 新 闻 项 目 符号 腾 出 空间 所 

| padding:2px 2px 2px 18px: 

人 # 以 背景 方式 添加 项 目 符号 所 

background ee) no-repeat 6px 25%; 

| margin:2px 

| /为 应 用 人 做 准备 ， 禁 止 换行 3/ 

| white-space: nowrap; 

| 必 为 应 用 text-overflow 做 准备 ， 禁 止 文本 溢出 显示 */ 

| ‘overflow: hidden; 
| -0-text-overflow: ellipsis; 履 兼容 Opera */ 
| text-overflow: ellipsis; 请 兼容 IE, Safari (WebKit) */ 
| -moz-binding: url(images/ellipsis.xml#ellipsis’): /# 兼容 Firefox */} 
| </style> 
| <d> 
| <dt> 唐 诗 名 句 精 选 </dt> 
| <dd> 海 内 存 知己 ， 天 涯 若 比 邻 。 唐 。 王勃 《 送 杜 少 府 之 任 罚 州 》 </dd> 
<dd> 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 剪 刀 。 唐 。 贺 知 章 《 咏 柳 》 </dd> 
| <dd> 和 欲 穷 千 里 目 ， 更 上 一 层 楼 。 唐 。 王 之 涡 《 登 蕉 省 楼 》 </dd> 
| <dd> 野 旷 天 低 树 ， 江 清 月 近 人 。 唐 。 和 孟浩然 《 宿 建 德江 》 </dd> 
| <dd> 大 漠 孤 烟 直 ， 长 河 落日 圆 。 唐 。 王 维 《 使 至 塞 上 》 </dd> 
| </dl> 
?加 | 
| 
| 
| 
| 
| 
| 
| 





20.1.3 文本 换行 


在 CSS3 中 ， 使 用 word-break 属性 可 以 定义 文本 自动 换行 。 基 本 语法 如 下 所 示 。 
word-break:normal | keep-all | break-all 


取 值 简单 说 明 如 下 : 

加 ”normal: 为 默认 值 ， 依 照 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 。 

回 keep-al:， 对 于 中 文 、 韩 文 、 日 文 不 允许 字 断 开 。 适 合 包 含 少量 亚洲 文本 的 非 亚 洲 文本 。 

回 “break-all: 与 normal 相同 ， 允 许 非 亚 洲 语言 文本 行 的 任意 字 内 断 开 。 该 值 适合 包含 一 些 非 亚 
| 洲 文本 的 亚洲 文本 ， 如 使 连续 的 英文 字母 间断 行 。 
| word-wrap 属性 没有 被 广泛 支持 , 特别 是 Firefox 和 Opera 浏览 器 对 其 的 支持 比较 消极 , 这 是 因为 
| 早期 的 W3C 文本 模型 (http://www.w3.org/TR/2003/CR-css3-text-20030514/) 放弃 了 对 其 的 支持 , 而 是 
| 定义 了 wrap-option 属性 代替 word-wrap 属性 。 但 是 在 最 新 的 文本 模式 http://www.w3.org/ 
TR/css3-text/) 中 继续 支持 该 属性 ， 并 重 定义 了 属性 值 。 
| 【补充 】 
word-break 原来 是 正 私有 属性 , 在 CSS3 中 被 Text 模块 采用 , 得 到 Chrome 和 Safari 等 浏览 器 的 
| 支持 ， 但 不 支持 keep-all 取 值 。 


视频 讲 
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另外 ,下 自 定 义 了 多 个 换行 处 理 属性 : line-break、word-wrap、word-break，CSS 1 也 定义 了 | 
white-space。 这 几 个 属性 简单 比较 如 下 : | 

line-break: 指定 如 何 (或 是 否 ) 断 行 。 除 了 Firefox， 其 他 浏览 器 都 支持 。 取 值 说 明 如 下 | 

所 示 。 | 
> auto: 使 用 默认 的 断 行规 则 分 解 文本 。 

> ”loose: 使 用 最 松散 的 断 行规 则 分 解 文本 ， 一 般 用 于 短 行 的 情况 ， 如 报纸 。 | 
> ”normal: 使 用 最 一 般 的 断 行规 则 分 解 文本 。 | 
> strict 使 用 最 严格 的 断 行 原则 分 解 文本 。 | 

加 ”word-wrap: 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 所 有 浏览 器 都 支持 。 取 值 说 明 如 下 | 
所 示 。 
> ”normal: 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 处 理 )。 
> break-word: 在 长 单词 或 URL 地 址 内 部 进行 换行 。 
word-break: 指定 怎样 在 单词 内 断 行 。 取 值 说 明 参 考 上 面 语法 。 
white-space: 设置 如 何 处 理 元 素 中 的 空格 。 所 有 浏览 器 都 支持 。 取 值 说 明 如 下 所 示 。 
> ”normal: 默认 处 理 方式 。 
> ”pre: 使 用 等 宽 字体 显示 预先 格式 化 的 文本 ， 不 合并 文字 间 的 空白 距离 ， 当 文 

字 超 出 边界 时 不 换行 。 
> nowrap: 强制 在 同一 行内 显示 所 有 文本 ， 合 并 文本 间 的 多 余 空白 。 
> ”pre-wrap: 使 用 等 宽 字 体 显 示 预 先 格 式 化 的 文本 ， 不 合并 文字 间 的 空白 距离 ， 当 文字 碰 

到 边界 时 发 生 换行 。 
> pre-line: 保持 文本 换行 ， 不 保留 文字 间 的 空白 距离 ， 当 文字 碰 到 边界 时 发 生 换行 。 

【拓展 】 

在 正 浏 览 器 下 ， 使 用 “word-wrap:break-word; ”声明 可 以 确保 所 有 文本 正常 显示 。 在 Firefox 浏 
览 器 下 ， 中 文 不 会 出 任何 问题 。 英 文 语句 也 不 会 出 问题 。 但 是 ， 长 串 英文 会 出 问题 。 为 了 解决 长 串 英 
文 ， 一 般 “word-wrap:break-word: ”和 “word-break:break-all; ”声明 结合 使 用 。 但 是 ， 这 种 方法 会 导 
致 普通 的 英文 语句 中 的 单词 被 断 开 显示 (IE 下 也 是 )。 现 在 的 问题 主要 是 长 串 英文 和 英文 单词 被 断 开 | 
的 问题 。 | 

为 了 解决 这 个 问题 ， 可 使 用 “word-wrap:break-word:overflow:hidden; ”， 而 不 是 “word-wrap: | 
break-word;word-break:break-all; ”。“word-wrap:break-word;overflow:auto; ”在 IE 下 没有 任何 问题 ， 但 是 | 
在 Firefox 下 ， 长 串 英文 单词 就 会 被 遮 住 部 分 内 容 。 

【示例 】 下 面 示例 在 页 面 中 插入 一 个 表格 ， 由 于 标题 行文 字 较 多 ， 标 题 行 常 被 撑 开 ， 影 响 浏览 体 | 
验 。 为 了 解决 这 个 问题 ， 借 助 CSS 换行 属性 进行 处 理 ， 比 较 效果 如 图 20.2 所 示 。 

<style type="text/css"> 





加 网 





table { 
width: 100%:; 
font-size: 14px: | 
border-collapse: collapse: 证 定 义 细 线 表格 */ | 
border: 1px solid #cad9ea: 让 添加 淡色 细 线 边框 */ | 
table-layout: fixed: 人 # 定 义 表格 在 浏览 器 端 逐 步 解析 呈现 ， 避 免 破坏 布局 专 | 
! | 
th{ 长 
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background-image: url(images/th bgl.gif); 。“/* 使 用 背景 图 模拟 渐变 背景 */ 





background-repeat: repeat-x: 必定 义 背景 图 平 铺 方式 */ 
height: 30px: 
Vertical-align:middle: /# 垂 直 居 中 显示 所 
border: 1px solid #cad9ea: 让 添加 淡色 细 线 边框 */ 
padding: 0 lem 0; 
overflow: hidden: /# 超 出 范围 隐藏 显示 ， 避 免 撑 开 单元 格 所 
word-break: keep-all: 证 禁止 词 断 开 显示 */ 
white-space: nowrap: 让 强迫 在 一 行内 显示 */ 
| } 
ut 
| height: 20px; 
border: 1px solid #cad9ea: /# 添 加 淡色 细 线 边框 所 
padding: 6px lem; 证 增加 单元 格 空隙， 避免 文本 挤 在 一 起 */ 
H 
tr:nth-child(even) { background-color: #f5fafe: } 
.Ww4 { width: 4em: } 
</style> 
<table> 
<t> 
<th class="w4"> 与 文本 换行 相关 的 属性 </ 了 h> <th> 使 用 说 明 </th> 
</t> 
<tr> 


<td>line-break</td><td>......</td> 
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(a) 处 理 前 (b) 处 理 后 
图 20.2 禁止 表格 标题 文本 换行 显示 
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c 
20.1.4 书写 模式 


CSS3 增强 了 文本 布局 中 的 书写 模式 , 在 CSS 2.1 定义 的 direction 和 unicode-bidi 属性 基础 上 ， 源 | 频 讲 
增 writing-mode 属性 。 基 本 语法 如 下 所 示 。 | 会 内 


writing-mode:horizontal-tb | Vertical-rl | vertical-lr | Ir-tb | tb-rl | 
取 值 简单 说 明 如 下 : 
horizontal-tb: 水 平方 向 自 上 而 下 的 书写 方式 ， 类 似 下 私有 值 -tb。 | 
vertical-rl: 垂直 方向 自 右 而 左 的 书写 方式 ， 类 似 下 私有 值 tb-rl。 | 
vertical-lr: 垂直 方向 自 左 而 右 的 书写 方式 。 
rtb: 左 - 右 ， 上 -下 。 对 象 中 的 内 容 在 水 平方 向 上 从 左 向 右 流入 ， 后 一 行 在 前 
一 行 的 下 面 显示 。 
tb-rl: 上 -下 ， 右 - 左 。 对 象 中 的 内 容 在 垂直 方向 上 从 上 向 下 流入 ， 自 右 向 左 。 
后 一 坚 行 在 前 一 竖 行 的 左面 。 全 角 字符 是 竖 直 向 上 的 , 半角 字符 如 拉丁 字母 
或 片 假名 顺 时针 旋 转 90” 。 
权威 参考 : http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/。 权威 参考 
【补充 】 
direction 设置 文本 流 方向 ， 取 值 包 括 : ltr， 文 本 流 从 左 到 右 ;， rtl， 文 本 流 从 右 到 左 。unicode-bidi 
用 于 在 同一 个 页 面 内 显示 不 同方 向 的 文本 ， 与 direction 属性 一 起 使 用 。 
【示例 1】 下 面 示例 设计 唐诗 从 右 侧 流入 ， 自 上 而 下 显示 ， 效 果 如 图 20.3 所 示 。 
<style type="text/css"> 
#box { 
float: right: 
writing-mode: tb-rl; 
-webkit-writing-mode: vertical-rl: 
writing-mode: vertical-rl: 











图 固 罗 加 


[sl 





<p> 春 眼 不 觉 晓 ， 处 处 闻 啼 鸟 。 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 
</div> 


【示例 2】 配 合 margin-top: auto 和 margin-bottom: auto 声明 ， 可 以 设计 栏目 垂直 居中 效果 ， 如 
图 20.4 所 示 。 


<style type="text/css"> 
.box { 
width: 400px: height: 300px: 
background-color: #f0f3f9: 
writing-mode: tb-rl: 
-webkit-writing-mode: vertical-rl: 
writing-mode: Vertical-Il: 
} 
-auto { 
margin-top: auto: 记 垂 直 居 中 */ 
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NA 








| 户 本 直 居 中 字 
I 
| 
二 img { height:120px:} 
全 站 | </style> 
| 
<div class="box"> 
<div class="auto"><img src="images/bg.png"></div> 
| </div> 


和 


春 
晓 


E 
站 
昌 
所 
从 
i 





图 20.3 设计 唐诗 传统 书写 方式 图 20.4 设计 垂直 居中 布局 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
【示例 3】 下 面 示例 设计 一 个 象棋 棋子 ， 然 后 定义 当 超 链 接 被 激活 时 ， 首 行文 本 缩 进 4 个 像素 。 
| 

| 





由 于 使 用 了 垂直 书写 模式 ， 则 文本 向 下 移动 4 个 像素 ,这 样 就 可 以 模拟 一 种 动态 下 沉 效果 ， 如 图 20.5 

| 所 示 。 

| <style type="text/css"> 

| -bm { 
width: 80px: height: 80px: 证 固定 大 小 */ 
line-height: 80px: 证 垂 直 居中 */ 
font-size: 62px: 刻 大 字体 */ 
cursor: pointer; 放手 形 指针 样式 */ 
text-align: center: 收文 本 居中 显示 */ 
text-decoration:none; 证 清除 下 划 线 */ 
color: #a78252: /# 字 体 颜 色 #/ 
background-color: #ddc390: 证 增 加 背景 色 */ 

| border: 6px solid #ddc390: 增加 粗 边 框 */ 

| border-radius: 509%: 上 定义 圆 形 显示 所 

| 必定 义 阴影 和 内 阴影 边线 所 

| box-shadow: inset 0 0 0 1px #d6b681. 0 1px. 0 2px. 0 3px. 0 4px: 

| writing-mode: tb-rl: 

| -webkit-writing-mode: vertical-rl: 

| writing-mode: vertical-rl: 

| } 

| .btn:active { text-indent: 4px:} 

| </style> 

| 

| <ahref="#" class="btn"> 将 </a> 
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图 20.5 设计 首 字 下 沉 特 效 
20.1.5 initial 值 


i 
initial 表示 初始 化 属性 的 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 想 重 置 某 个 属性 为 浏览 器 默认 设 
置 ， 那 么 就 可 以 使 用 该 值 ， 这 样 就 可 以 取消 用 户 定义 的 CSS 样式。 


< 仙 注 意 : 本 暂 不 支持 该 属性 值 。 


【示例 】 在 下 面 示例 中 ， 页 面 中 插入 了 四 段 文 本 ， 然 后 在 内 部 样式 表 中 定义 这 四 段 文 本 蓝 色 、 加 
粗 显示 ， 字 体 大 小 为 24 像素 ， 显 示 效 果 如 图 20.6 所 示 。 





<p> 春 眠 不 觉 晓 ，</p> 
<p> 处 处 闻 啼 岛 。</p> 
<p> 夜 来 风雨 声 ，</p> 
<p> 花 落 知 多 少 。</p> 


如 果 想 禁止 第 一 句 和 第 三 句 用 户 定义 的 样式 ， 只 需 在 内 部 样式 表 中 添加 一 个 独立 样式 ， 然 后 把 文 
本 样式 的 值 都 设 为 initial 值 就 可 以 了 ， 具 体 代码 如 下 所 示 ， 运 行 结果 如 图 20.7 所 示 。 
Pinth-child(odd){ 
color: initial: 
font-size:initial: 
font-weight:initial: 





} 


DY localhostad x 


C |@ localhosta080/ 从 3 C |®locahosta0e0/ 从 3 


府中 不 党 奢 ， 
处 处 闻 啼 鸟 。 


春 眠 不 觉 晓 ， 


处 处 闻 啼 鸟 。 
夜来 风雨 声 ， 
花 落 知 多 少 。 


入 来 风 南 声 ， 
花 落 知 多 少 。 





图 20.6 定义 段落 文本 样式 图 20.7 恢复 段落 文本 样式 
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在 浏览 器 中 可 以 看 到 ， 第 一 句 和 第 三 句 文本 恢复 为 默认 的 黑色 、 常 规 字 体 ， 大 小 为 16 像素 。 


| 20.1.6 inherit 值 


inherit 表示 属性 能 够 继承 祖先 的 设置 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 
【示例 】 下 面 示例 设置 一 个 包含 框 , 高 度 为 200 像素 , 包含 两 个 盒子 , 定义 盒子 高 度 分 别 为 100% 

和 inherit， 正 常情 况 下 都 会 显示 200 像素 ， 但 是 在 特定 情况 下 ， 如 当 盒子 被 定义 为 绝对 定位 显示 ， 则 
| 设置 “height: inherit; ”能 够 按 预 定 效果 显示 ， 而 “height 100%;” 就 可 能 撑 开 包含 框 ， 效 果 如 图 20.8 
| 所 示 。 
<style type="text/css"> 
box { 

display: inline-block: 

height: 200px: 

‘width: 45%; 

border: 2px solid #666: 








} 

-box div{ 

width: 200px; 
background-color: #ccc: 
position: absolute: 


-heightl { height: 10096:} 
.height2 {height: inherit:} 
</style> 
| <div class="box"> 
| <div class="height1">height: 100%:;</div> 
| </div> 
| <div class="box"> 

<div class="height2">height: inherit:</div> 
</div> 


| 
| 
| 
| 
| 














图 20.8 ”比较 inherit 和 100% 高 度 效果 


【补充 】 
inherit 表示 继承 属性 值 , 一般 用 于 字体 、 颜 色 、 背 景 等 ; auto 表示 自 适应 ,一 般 用 于 高 度 、 宽 度 、 
」 外 边 距 和 内 边 距 等 关于 长 度 的 属性 。 
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20.1.7 unset 值 


unset 表示 擦 除 用 户 声明 的 属性 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 属性 有 继承 的 值 ， 则 该 属 | 
性 的 值 等 同 于 inherit， 即 继承 的 值 不 被 擦 除 ， 如 果 属 性 没有 继承 的 值 ， 则 该 属性 的 值 等 同 于 initial， 
即 擦 除 用 户 声明 的 值 ， 恢 复 初始 值 。 


< 全 注意 : IE 和 Safari 浏览 器 暂时 不 支持 该 属性 值 。 


【示例 】 下 面 示例 设计 四 段 文本 ， 第 一 段 和 第 二 段位 于 <div class="box"> 容 器 中 ， 设 置 段落 文本 | 
显示 为 30 像素 的 蓝 色 字体 ， 现 在 擦 除 第 二 段 和 第 四 段 文本 样式 ， 则 第 二 段 文 本 显示 继承 样式 ， 即 12 | 
像素 的 红色 字体 ， 而 第 四 段 文本 显示 初始 化 样式 ， 即 16 像素 的 黑色 字体 ， 效 果 如 图 20.9 所 示 。 


<style type="text/css"> 
‘box {color: red: font-size: 12px:} 
Pp {color: blue; font-size: 30px:} 
p.unset { 

color: unset; 

font-size: unset; 





} 
</style> 
<div class="box"> 

<p> 春 眠 不 觉 晓 ，</p> 

<p class="unset"> 处 处 闻 啼 鸟 。</p> 
</div> ! 
<p> 夜 来 风雨 声 ，</p> | 
<p class="unset"> 花 落 知 多 少 。</p> | 


DD localhostS0e0/myste x 


© | © localhost 


春 眠 不 觉 晓 ， 


外 测 到 55 
夜来 风雨 声 ， 


花 基 知 多 少 。 








图 20.9 ”比较 擦 除 后 的 文本 效果 
20.1.8 all 属 性 
all 属性 表示 所 有 CSS 的 属性 ， 但 不 包括 unicode-bidi 和 direction 这 两 个 CSS 属性 。 
< 儿 注意 : IE 浏览 器 暂时 不 支持 该 属性 。 
【示例 】 针 对 20.1.7 节 示 例 ， 我 们 可 以 简化 punset 类 样式 。 


punset { 
all: unset: 





} 
如 果 在 样式 中 ， 声 明 的 属性 非常 多 ， 使 用 al 会 极为 方便 ， 避 免 逐 个 设置 每 个 属性 。 
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20.2 色彩 模式 


| CSS 2.1 支持 Color Name (颜色 名 称 )、HEX (十 六 进 制 颜色 值 )、RGB，CSS3 新 增 三 种 颜色 模 
式 : RGBA、HSL 和 HSLA， 下 面 分 别 进行 介绍 。 


| 权威 参考 : http://www.w3.org/TR/css3-color/。 


20.2.1 rgba() 函 数 





回 
视频 讲解 | RGBA 是 RGB 色彩 模式 的 扩展 ， 它 在 红 、 绿 、 蓝 三 原色 通道 基础 上 增加 了 Alpha 通道 。 其 语法 
| 格式 如 下 所 示 : 
rgba(r,g.b,<opacity>) 


| 

| 参数 说 明 如 下 : 

| 回 r、g、b: 分 别 表示 红色 、 绿 色 、 蓝 色 三 种 原色 所 占 的 比重 。 取 值 为 正 整 数 或 者 百分数 。 正 
| 整数 值 的 取 值 范围 为 0~55， 百 分 数值 的 取 值 范围 为 0~100.0%。 超 出 范围 的 数值 将 被 截至 
| 其 最 接近 的 取 值 极限 。 注 意 ， 并 非 所 有 浏览 器 都 支持 使 用 百分数 值 。 

| <opacity>: 表示 不 透明 度 ， 取 值 在 0 到 1 之 间 。 

| 【示例 】 下 面 示例 使 用 CSS3 的 box-shadow 属性 和 rgba0 函 数 为 表单 控件 设置 半 透 明度 的 阴影 ， 
| 来 模拟 柔和 的 润 边 效果 。 示 例 主要 代码 如 下 : 

| <style type="text/css"> 

| input, textarea {/* 统 一 文本 框 样式 */ 
| 

| 

| 

| 

| 

| 

| 


padding: 4px: 让 增加 内 补 白 ， 增 大 表单 对 象 尺寸 ， 看 起 来 更 大 方 */ 
border: solid 1px #ESESES; 片 增加 淡淡 的 边框 线 */ 

outline: 0: 族 清 除 轮廓 线 */ 

font: normal 13px/100% Verdana, Tahoma. sans-serif: 

width: 200px: 目 固 定 宽度 */ 

background: #FFFFFF: 刻 白 色 背 景 */ 

上 设置 边框 阴影 效果 */ 


box-shadow: reba(0. 0. 0. 0.1) Opx Opx 8px: 


} 
人 # 定 义 表单 对 象 获取 焦点 ， 鼠 标 经 过 时 ， 高 亮 显示 边框 所 
input:hover textarea:hover. input:focus. textarea:focus { border-color: #C9C9C9: } 


| label {/* 定 义 标签 样式 */ 
| margin-left: 10px: 
| color: #999999: 
| display:block: 上 # 以 块 状 显示 ， 实 现 分 行 显示 所 
| 
| -submit input { 人 # 定 义 提交 按钮 样式 所 
| width:auto: 上 # 自 动 调整 宽度 3/ 
padding: 9px 15px: 履 增 大 按钮 尺寸 ， 看 起 来 更 大 气 */ 
| background: #617798: 上 设计 扁平 化 单 色 背 景 #/ 
| border: 0: 人 # 清 除 边 框 线 志 
| font-size: 14px: /# 固 定 字体 大 小 所 
color: 三 FFFFF: 刻 白 色 字 体 */ 
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} 
</style> 
<form> 
<p class="name"> 
<label for="name"> 姓 名 </label> 
<input type="text" name="name" id="name" /> 
</p> 
<p class="email"> 
<label for="email"> 邮 箱 </label> 
<input type="text" name="email" id="email" /> | 





<p> 
<p class="submit"> 
<input type="submit" value=" 提 交 " /> 
<p> 
</form> 


预览 效果 如 图 20.10 所 示 。 


/llocalhosum ~ 全 | 名 locahest 





ot 
图 20.10 设计 带 有 阴影 边框 的 表单 效果 示例 效果 
容 提示 : rgba(0.0,0.0.1) 表 示 不 透明 度 为 0.1 的 黑色 ， 这 里 不 宜 直接 设置 为 浅 灰色 ， 因 为 对 于 非 白色 
背景 来 说 ， 灰 色 发 虚 ， 而 半 透 明 效 果 可 以 避免 这 样 的 情况 发 生 。 


20.2.2 hsl() 函 数 


HSL 是 一 种 标准 的 色彩 模式 , 包括 了 人 类 视力 所 能 感知 的 所 有 颜色 , 在 屏幕 上 可 以 重 现 16777216 
种 颜色 ， 是 目前 运用 最 广泛 的 颜色 系统 。 它 通过 色调 CH)、 饱 和 度 〈S) 和 亮度 (L) 三 个 颜色 通道 
的 外 加 来 获取 各 种 颜色 。 其 语法 格式 如 下 所 示 。 
hsl(<length>.<percentage>.<percentage>) 
参数 说 明 如 下 : 
加 ”<length> 表 示 色 调 (Hue) 。 可 以 为 任意 数值 ， 用 以 确定 不 同 的 颜色 。 其 中 0 (或 360、-360) 
表示 红色 ，60 表示 黄色 ，120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 表示 洋红 。 
<percentage> (第 一 个 ) 表示 饱和 度 〈Saturation) ， 可 以 为 0 一 100%。 其 中 0 表示 灰 度 ， 即 
没有 使 用 该 颜色 ，100% 表 示 饱 和 度 最 高 ， 即 颜色 最 艳 。 
加 ”<percentage> (第 二 个 ) 表示 亮度 (Lightness) 。 取 值 为 0 一 100%。 其 中 0 最 暗 ， 显 示 为 黑 | 
色 ，50% 表 示 均 值 ，100% 最 亮 ， 显 示 为 白色 。 
【示例 】 设 计 颜 色 表 。 先 选择 一 个 色 值 ， 然 后 利用 调整 颜色 的 饱和 度 和 亮度 比重 ,分 别 设计 不 同 
的 配色 方案 表 。 在 网 页 设计 中 ， 利 用 这 种 方法 就 可 以 根据 网 页 需要 选择 恰当 的 配色 方案 。 使 用 HSL | 
颜色 表现 方式 ， 可 以 很 轻松 地 设计 网 页 配色 方案 表 ， 模 拟 演示 效果 如 图 20.11 所 示 。 
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<styletype="text/css"> 
证 设计 表格 边框 样式 ， 并 增加 内 部 间距 ， 以 方便 观看 */ 


table { border: solid 1px red: background:#eee: padding:6px:} 

证 设 计 列 标题 字体 样式 */ 

th{ color:red; font-size:12px: font-weightnormal:} 

此 设计 单元 格 大 小 尺寸 *#/ 

td{ width:80px: height:30px:} 

A* 第 1 行 */ 

tr:nth-child(4) td:nth-of-type(1) {background:hsl(0.100%,100%%):}/* 第 1 列 */ 
tr:nth-child(4) td:nth-of-type(2) {background:hsl(0.75%,100%):}/* 第 2 列 */ 
tr:nth-child(4) td:nth-of-type(3){background:hsl(0.50%,100%):}/* 第 3 列 */ 
tr:nth-child(4) td:nth-of-type(4) {background:hsl(0.25%,100%):}/* 第 4 列 */ 
tr:nth-child(4) td:nth-of-type(5){background:hs1(0.0%,100%):}/* 第 5 列 */ 
必 第 2 行 %/ 

trnth-child(S) td:nth-of-type(1) fbackground:hsl(0.10096.88960):}/* 第 1 列 */ 
trnth-child(S) td:nth-of-type(2) {background:hsl(0.75%,88%%):}/* 第 2 列 */ 
trnth-child(S) td:nth-of-type(3){background:hsl(0.50%%,88%):}/* 第 3 列 */ 
trnth-child(S) td:nth-of-type(4) {background:hsl(0,25%,88%):}/* 第 4 列 */ 
tr:nth-child(5) td:nth-of-type(5){background:hsl(0.0%,88%):}/* 第 5 列 */ 

人 # 第 3 行 */ 

tr:nth-child(6) td:nth-of-type(1) {background:hsl(0,.100%.75%%):}/* 第 1 列 */ 
tr:nth-child(6) td:nth-of-type(2) {background:hsl(0,75%,75%):}/* 第 2 列 */ 
tr:nth-child(6) td:nth-of-type(3) {background:hs1(0,50%,759%):}/* 第 3 列 */ 
tr:nth-child(6) td:nth-of-type(4) {background:hs1(0,25%,75%):}/* 第 4 列 */ 
trnth-child(6) td:nth-of-type(5){background:hs1(0,0%,75%%):}/* 第 5 列 */ 
让 第 4 行 */ 

tr:nth-child(7) td:nth-of-type(1) {background:hsl(0,100%,63%);}/* 第 1 列 */ 
tr:nth-child(7) td:nth-of-type(2) {background:hs1(0,75%,63%):}/* 第 2 列 */ 
tr:nth-child(7) td:nth-of-type(3){background:hs1(0,50%,63%):}/* 第 3 列 */ 
tr:nth-child(7) td:nth-of-type(4) {background:hs1(0,25%,63%):}/* 第 4 列 */ 
tr:nth-child(7) td:nth-of-type(5){background:hs1(0.0%.63%):}/* 第 5 列 */ 
A* 第 5 行 */ 

trnth-child(8) td:nth-of-type(1) {background:hs1(0,100%.509%):}/* 第 1 列 */ 
tr:nth-child(8) td:nth-of-type(2){background:hs1(0,75%,50%):}/* 第 2 列 */ 
tr:nth-child(8) td:nth-of-type(3) {background:hs1(0.50%.50%):}* 第 3 列 */ 
tr:nth-child(8) td:nth-of-type(4) {background:hs1(0,25%,509%):}/* 第 4 列 */ 
tr:nth-child(8) td:nth-of-type(5){background:hsl(0.0%.50%):}/* 第 5 列 */ 
让 第 6 行 */ 

tr:nth-child(9) td:nth-of-type(1) {background:hsl(0.100%.38%):}/* 第 1 列 */ 
tr:nth-child(9) td:nth-oftype(2){background:hsl(0.7596.38%6):}/# 第 2 列 */ 
trnth-child(9) td:nth-of-type(3) {background:hsl(0.50%.3896):}/* 第 3 列 */ 
tr:nth-child(9) td:nth-of-type(4) {background:hs1(0.25%.38%):} 上 第 4 列 */ 
trnth-child(9) td:nth-oftype(5){background:hsl(0.096.3890):}/* 第 5 列 */ 

上 第 7 行 *#/ 

tr:nth-child(10) td:nth-of-type(1) {background:hs1(0.100%.25%):}/* 第 1 列 */ 
tr:nth-child(10) td:nth-of-type(2) {background:hs1(0.75%.25%):}/* 第 2 列 */ 
tr:nth-child(10) td:nth-of-type(3){background:hs1(0.50%.25%):}/* 第 3 列 */ 
tr:nth-child(10) td:nth-of-type(4) {background:hs1(0.25%.25%):}/* 第 4 列 */ 
tr:nth-child(10) td:nth-of-type(5) {background:hsl(0.0%.25%):}/* 第 5 列 */ 
第 8 行 */ 


“406 


2 CSS: 
第 20 章 3 文本 样式 了 


Ss 


tr:nth-child(11) td:nth-of-type(1) {background:hsl(0.100%.13%):}/* 第 1 列 */ 
tr:nth-child(11) td:nth-of-type(2){background:hsl(0.75%.139%%):}/* 第 2 列 */ 
tr:nth-child(11) td:nth-of-type(3){background:hsl(0.50%.13%):}/* 第 3 列 */ 
tr:nth-child(11) td:nth-of-type(4) {background:hsl(0,25%.13%):}/* 第 4 列 */ 
tr:nth-child(11) td:nth-of-type(5){background:hsl(0.0%.13%):}/* 第 5 列 */ 
人 # 第 9 行 志 
tr:nth-child(12) td:nth-of-type(1){background:hsl(0.100%.0%):}/* 第 1 列 */ 
tr:nth-child(12) td:nth-of-type(2) {background:hsl(0.75%.0%):}/* 第 2 列 */ 
tr:nth-child(12) td:nth-of-type(3){background:hsl(0.50%,09%%);}/* 第 3 列 */ 
tr:nth-child(12) td:nth-of-type(4) {background:hsl(0.25%.0%):}/* 第 4 列 */ 
tr:nth-child(12) td:nth-of-type(5){background:hsl(0,0%,0%):}/* 第 5 列 */ 
</style> 
<table class="hslexample"> 
<tbody> 
<tr> 
<th>&nbsp:</th><th colspan="5"> 色 相 : H=0 Red </th> 
</t> 
<tr> 
<th>&nbsp;</th><th colspan="5"> 饱 和 度 (&rarr)</th> 
</t> 
<tr> 
<th> 亮 度 (&darr:)</th> 
<th>100% </th><th>75% </th><th>50% </th><th>25% </th><th>0% </th> 
</t> 








图 20.11 使 用 HSL 颜色 值 设计 颜色 表 


在 上 面 代 码 中 ,“trnth-child(4) td:nth-of-type(1)” 中 的 tr:nth-child(4) 子 选择 嚣 表示 选择 行 ， 而 
td:nth-of-type(1) 表 示 选 择 单 元 格 ( 列 )。 其 他 行 选择 器 结构 依 此 类 推 。 在 “background:hsl(0,0%,0%);” 
声明 中 ,hsl0 函 数 的 第 一 个 参数 值 0 表示 色相 值 ， 第 二 个 参数 值 0% 表 示 饱 和 度 ， 第 三 个 参数 值 0% 表 
示 亮 度 。 
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pu HSLA 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 饱 和 度 、 亮 度 三 要 素 基础 上 增加 了 不 透明 度 参数 。 使 
国 | 用 HSLA 色彩 模式 ， 可 以 定义 不 同 透明 效果 。 其 语法 格式 如 下 。 


hsla(<length>,<percentage>.<percentage>,<opacity>) 
| 其 中 前 三 个 参数 与 hs1l0 函 数 参数 含义 和 用 法 相同 ,第 四 个 参数 <opacity> 表 示 不 透明 度 ， 取 值 在 0 

















到 1 之 间 。 
【示例 】 下 面 示例 设计 一 个 简单 的 登录 表单 ， 表 单 对 象 的 边框 色 使 用 #HE 值 进行 设置 ， 定 义 为 白 
| 色 ; 表单 对 象 的 阴影 色 使 用 rgba(0,0,0,0.1) 值 进行 设置 ， 定 义 为 非常 透明 的 黑色 ; 字体 颜色 使 用 


<style type="text/css"> 

body{ /* 为 页 面 添加 背景 图 像 ， 显 示 在 中 央 项 部 位 置 ， 并 列 完全 覆盖 窗口 */ 
background: #eedfcc url(images/bg.ipg) no-repeat center top: 
background-size: cover: 


} 
-form { /* 定义 表单 框 的 样式 */ 
width: 300px: 族 固定 表单 框 的 宽度 */ 
margin: 30px auto; /# 居中 显示 */ 
border-radius: Spx: 让 设计 圆 角 效果 */ 
box-shadow: 0 0 5px rgba(0.0,0.0.1). /# 设计 润 边 效果 */ 
0 3pX 2px rgba(0.0.0.0.D: 证 设计 淡淡 的 阴影 效果 */ 
} 
-formp {/* 定义 表单 对 象 外 框 圆 角 、 白 边 显示 */ 
Width: 100%; 
float: left; 
border-radius: Spx: 


border: 1px solid #ffF 


} 
必 定义 表单 对 象 样式 */ 
.form input[type=text]. 
‘form input[type=password] { 
上 固定 宽度 和 大 小 */ 
width: 100%: 
height: 50px: 
padding: 0: 
/# 增 加 修饰 样式 */ 
| border: none: 证 移 除 默认 的 边框 样式 */ 
| background: rgba(255.255,255.0.2): 雍 增加 半 透 明 的 白色 背景 */ 
| box-shadow: inset 0 0 10px rgba(255.255.255.0.5): /# 为 表单 对 象 设计 高 亮 效果 */ 
| 让 定义 字体 样式 */ 
text-indent: 10px: 
font-size: 16px: 
color:hsla(0.0%.100%.0.9): 
text-shadow: 0 -1px 1px rgba(0.0.0.0.4): 话 为 文本 添加 阴影 ， 设 计 立 体 效果 */ 


form input[type=text] { 旋 设计 用 户 名 文本 框 底部 边框 样式 ， 并 设计 项 部 圆 角 */ 
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border-bottom: 1px solid rgba(255.2S5.255.0.7): | 
border-radius: Spx Spx 0 0: | 
} | 
.form input[type=password] { 。“”/* 设计 密码 域 文本 框 顶部 边框 样式 ， 并 设计 底部 圆 角 */ | 


border-top: 1px solid reba(0.0.0.0.1): | 


border-radius: 0 0 Spx Spx: 





Er 
/# 定义 表单 对 象 被 激活 ， 或 者 鼠标 经 过 时 ， 增 亮 背 景色 ， 并 清除 轮廓 线 */ NODE 
.form input[type=text]:hover, | 
.form input[type=password]:hover, | 
.form input[type=text]:focus, 
.form input[type=password]:focus { 
background: rgba(255.255.255.0.4): 
outline: none; 
} 
</style> 
<form class="form"> 
<input type="text" id="login" name="login" placeholder=" 用 户 名 "> 
<input type="password" name="password" id="password" placeholder=" 密 码 "> 
<p> 
</form> 


局 EECSEEI 








图 20.12 设计 登录 表单 
20.2.4 opacity 属性 


opacity 属性 定义 元 素 对 象 的 不 透明 度 。 其 语法 格式 如 下 所 示 : 
opacity: <alphavalue> | inherit: 


取 值 简单 说 明 如 下 ， 
回 。”<alphavalue> 为 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 ， 默 认 值 为 1。opacity | 
取 值 为 1 时 ， 则 元 素 是 完全 不 透明 的 ; 取 值 为 0 时 ， 元 素 是 完全 透明 的 ， 不 可 见 的 ; 介 于 1 
到 0 之 间 的 任何 值 都 表示 该 元 素 的 不 透明 度 。 如 果 超 过 了 这 个 范围 , 其 计算 结果 将 截取 到 与 
之 最 相近 的 值 。 
加 ”inherit 表示 继承 父辈 元 素 的 不 透明 性 。 
【示例 】 下 面 示例 设计 <div class="bg"> 对 象 铺 满 整个 窗口 ， 显 示 为 黑色 背景 ， 不 透明 度 为 0.7， 
这 样 可 以 模拟 一 种 半 透 明 的 遮 单 效果 ; 再 使 用 CSS 定位 属性 设计 <div class="login"> 对 象 显示 在 上 面 。 
示例 主要 代码 如 下 : 
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<style type="text/css"> 
body {margin: 0; padding: 0:} 
div { position: absolute: } 
bg{ 
width: 100%; 
height: 100%; 
background: #000; 
‘opacity: 0.7; 
filter: alpha(opacity=70):} 
.login { 
text-align:center: 
width:100%; 
top: 20%; 





} 

</style> 

<div class="web"><img src="images/bg.png" /></div> 

<div class="bg"></div> 

<div class="login"><img src="images/login.png” /></div> 


演示 效果 如 图 20.13 所 示 。 
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20.13 ”设计 半 透 明 的 背景 布 效果 


opacity 属性 只 能 为 整个 对 象 定义 不 透明 度 。 
+ ，20.2.5 transparent 值 


transparent 属性 值 用 来 指定 全 透明 色彩 ， 等 效 于 rgba(0.0.0.0) 值 。 
| 【示例 】 下 面 示 例 使 用 CSS 的 border 设计 三 角形 效果 ， 通 过 transparent 颜色 值 让 部 分 边框 透明 
| 显示 ， 代 码 如 下 所 示 : 
<style type="text/css"> 
#demo { 
width: 0: height: 0: 
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border-left: S0px solid transparent: 
border-right: SOpx solid transparent: 
border-bottom: 100px solid red; 
} 
</style> 
<div id="demo"></div> 
效果 如 图 20.14 所 示 。 | 
通过 调整 各 边 颜色 设置 ， 或 者 调整 各 边 宽度 ， 可 以 设计 不 同 角度 的 三 角形 ， 或 者 设计 直角 等 不 同 | 
形状 。 | 
回 ”设计 向 右 三 角形 
#demo { 
‘width: 0; height: 0; 
border-top: 50px solid transparent: 
border-left: 100px solid red: 
border-bottom: SO0px solid transparent: 
} 
回 ”设计 直角 三 角形 
#demo { 
width: 0; height: 0: 
border-top: 100px solid red: 
border-right: 100px solid transparent: ! 
} | 
回 ”设计 梯形 
效果 如 图 20.15 所 示 。 


#demo { 
height: 0; 
width: 120px: 
border-bottom: 120px solid #ec3504: 
border-left: 60px solid transparent: 
border-right: 60px solid transparent: 











图 20.14 设计 三 角形 效 图 20.15 设计 梯形 效果 
20.2.6 ”currentColor 值 


在 CSS 中 ，border-color、box-shadow 和 text-decoration-color 属性 的 默认 值 是 color 属性 的 值 。 
【示例 1】 下 面 示例 中 为 段落 文本 增加 边框 线 ， 边 框 线 的 颜色 为 “color:red;”， 显 示 为 红色 。 
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<style type="text/css"> 


| </style> 
<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 鸟 。 夜 来 风雨 声 ， 花 落 知 多 少 。<jp> 


在 CSS 1 和 CSS 2 中 ， 却 没有 为 此 定义 一 个 相应 的 关键 字 。 为 此 CSS3 扩展 了 颜色 值 ， 包 含 
| currentColor 关键 字 ， 并 用 于 所 有 接受 颜色 的 属性 上 。currentColor 表示 color 属性 的 值 。 
| 【示例 2】 在 下 面 示例 中 ， 设 计 图 标 背 景 颜色 值 为 currentColor， 这 样 在 网 页 中 随 着 链接 文本 的 
字体 颜色 不 断 变化 ， 图 标的 颜色 也 跟随 链接 文本 的 颜色 变化 而 变化 ,确保 整体 导航 条 色彩 一 致 性 ， 达 
到 图 文 合 一 的 境界 ， 效 果 如 图 20.16 所 示 。 


<style type="text/css"> 
icon { 
display: inline-block: 
width: 16px: height 20px: 
background-image: url(images/sprite icons.png): 
background-color: currentColor: /* 使 用 当前 颜色 控制 图 标的 颜色 */ 
} 
.iconl { background-position: 0 0: } 
icon2 { background-position: -20px 0: } 
.icon3 { background-position: -40px 0: } 
.icon4 { background-position: -60px 0: } 
link { margin-right: 15px: } 
-link:hover { color: red; }/* 虽然 改变 的 是 文字 颜色 ， 但 是 图 标 颜 色 也 一 起 变化 了 */ 
</style> 
<a href="##" class="link"><i class="icon icon1"></ 记 首页 </a> 
<a href="##" class="link"><i class="icon icon2"></ 记 刷新 </a> 
<a href="##" class="link"><i class="icon icon3"></ 记 收藏 </a> 
<a href="##" class="link"><i class="icon icon4"></ 户 展开 </a> 


D localhost:3080/mysite x We 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
€ 3 © |© localhost8080/mysite/test 
| 

| 

| 


* 首 页 吕剧 新 和 收 茂 = 果 


Tecalhost8a8Bormynitefteat2.htmt 


| 本 图 20.16 设计 图 标 背 景色 为 currentColor 

| am 

| 人 写 提示 : 如 果 为 color 属性 设置 为 currentColor， 则 相当 于 color: inherit。 
| 





20.3 文本 阴影 


CSS3 使 用 text-shadow 属性 可 以 给 文本 添加 阴影 效果 ， 到 目前 为 止 ，Safari、Firefox、Chrome 和 
Opera 等 主流 浏览 器 都 支持 该 功能 。 
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20.3.1 定义 text-shadow 


text-shadow 属性 是 在 CSS2 中 定义 的 ， 在 CSS 2.1 中 被 删除 ， 在 CSS3 的 Text 模块 中 又 恢复 。 基 | 
本 语法 如 下 所 示 : 

text-shadow:none | <length>{2.3} && <color>? 

取 值 简单 说 明 如 下 : 

none: 无 阴影 ， 为 默认 值 。 

回 ”<length>@D: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 
回 ”<length>@): 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 。 可 以 为 负 值 。 
回 
回 





<length>@@: 如 果 提 供 了 第 3 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 模糊 值 。 不 允许 负 值 。 
<color>: 设置 对 象 的 阴影 的 颜色 。 
【示例 】 下 面 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效 果 如 图 20.17 所 示 。 


text-align: center 

font: bold 60px helvetica. arial, sans-serif: 
color: #999:; 

text-shadow: 0.1em 0.1em #333; 


</style> 
<p>HTML5+CSS3</p> 





20.17 定义 文本 阴影 


“text-shadow: 0.1em 0.1em #333;” 声 明了 右 下 角 文本 阴影 效果 ,如果 把 投影 设置 到 右上 角 ， 则 可 
以 这 样 声明 ， 效 果 如 图 20.18 所 示 。 


D6 Secator 








图 20.18 定义 左上 角 阴 影 


Pp {text-shadow: -0.1em -0.1em #333:} 
同 理 ， 如 果 设置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 ， 演 示 效 果 如 图 20.19 所 示 。 
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Pp {text-shadow: -0.1em 0.1em #333:} 





图 20.19 定义 左下 角 阴 影 
也 可 以 增加 模糊 效果 的 阴影 ， 效 果 如 图 20.20 所 示 。 
Pp{ text-shadow: 0.1em 0.1em 0.3em #333: } 
或 者 定义 如 下 模糊 阴影 效果 ， 效 果 如 图 20.21 所 示 。 
pf text-shadow: 0.1em 0.1em 0.2em black: } 


(7) Er 





图 20.20 ”定义 模糊 阴影 图 20.21 定义 模糊 阴影 


窑 提示 : 在 text-shadow 属性 的 第 一 个 值 和 第 二 个 值 中 ， 正 值 偏 右 或 偏 下 ， 负 值 偏 左 或 偏 上 。 在 阴 
影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半 径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 如 何 
计算 模糊 效果 的 具体 算法 并 没有 指定 .在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 
个 颜色 值 。 颜色 值 会 被 用 作 阴 影 效果 的 基础 。 如 果 没有 指定 颜色 ， 那 么 将 使 用 color 属性 
值 来 替代 。 


20.3.2 案例 ， 设 计 特 效 字 


下 面 结合 示例 介绍 如 何 灵 活 使 用 text-shadow 属性 设计 特效 文字 效果 。 
【示例 1】 下 面 示例 通过 阴影 把 文本 颜色 与 背景 色 区 分 开 来 ， 让 字体 看 起 来 更 清晰 ， 代 码 如 下 : 





text-align: center: 

font: bold 60px helvetica. arial. sans-serif: 
color: #ffF: 

text-shadow: black 0.1em 0.1em 0.2em: 


</style> 
<p>HTML5+CSS3</p> 
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演示 效果 如 图 20.22 所 示 。 | 
【示例 2】 下 面 示例 演示 了 如 何 为 红色 文本 定义 三 个 不 同 颜色 的 阴影 , 演示 效果 如 图 20.23 所 示 。 | 
当 使 用 text-shadow 属性 定义 多 色 阴影 时 ， 每 个 阴影 效果 必须 指定 阴影 偏 移 ， 而 模糊 半径 、 阴 影 颜色 | 
是 可 选 参数 。 | 


<style type="text/css"> 
p{ 








text-align: center: | 
font:bold 60px helvetica, arial, sans-serif | 
color: red: | 
text-shadow: 0.2em 0.5em 0.1em #600, 
-0.3em 0.1em 0.1em #060. 
0.4em -0.3em 0.1em #006; 
</style> 
<p>HTML5+CSS3</p> 


I Fp > 4 ， [EEE Fre 


NI OOY 





图 20.22 ”使 用 阴影 增加 前 景色 和 背景 色 对 比 度 图 20.23 定义 多 色 阴影 
从 提示 : text-shadow 属性 可 以 接受 以 去 号 分 隔 的 阴影 效果 列表 ， 并 应 用 到 该 元 素 的 文本 上 。 阴 影 
效果 按照 给 定 的 顺序 应 用 ， 因 此 可 能 出 现 互相 覆盖 ， 但 是 它们 永远 不 会 覆盖 文本 本 身 ， 阴 
影 效 果 不 会 改变 框 的 尺寸 , 但 可 能 延伸 到 它 的 边界 之 外 。 阴影 效果 的 堆 司 层次 和 元 素 本 身 
的 层次 是 一 样 的 。 
【示例 3】 下 面 演示 把 阴影 设置 到 文本 线 框 的 外 面 ， 代 码 如 下 : 


<style type= "text/css"> 
p{ 





text-align: center: 
font:bold 60px helvetica. arial. sans-serif: 
color: red: 
border:solid 1px red: 
text-shadow: 0.Sem 0.5em 0.1em #600. 
-lem lem 0.1em #060. 
0.8em -0.8em 0.1em #006: 


} 
</style> 
<p>HTML5+CSS3</p> 

演示 效果 如 图 20.24 所 示 。 

【示例 4】 借 助 阴影 效果 列表 机 制 ， 可 以 使 用 阴影 又 加 出 燃烧 的 文字 特效 ， 代 码 如 下 : 

<style type="text/css"> 
body {background:#000:} 
PT{ 
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是 


SI 


text-align: center: 
font:bold 60px helvetica., arial. sans-serif: 


color red: 
text-shadow: 0 0 4px white, 
全 Ff | 0 -5px 4px #13, 
A | 2px -10px 6px #fd3, 
| -2px -15px 11px #f80. 
Note 2px -25px 18px #f20; 
| 
| </style> 
<p>HTML5+CSS3</p> 


演示 效果 如 图 20.25 所 示 。 
1 -四 


.severe - So |S icestos: 


] HTMLS+CSS3 
| L 
图 2024 定义 多 色 阴影 图 20.25 定义 燃烧 的 文字 特效 


| 【示例 5】text-shadow 属性 可 以 使 用 在 “:first-letter” 和 “:first-line” 伪 元 素 上 。 同 时 还 可 以 利用 
| 该 属性 设计 立体 文本 。 使 用 阴影 盖 加 出 的 立体 文本 特效 代码 如 下 : 


| <style type="text/css"> 

| body { background: #000: } 

DT 
text-align: center; 
padding: 24px; 
margin: 0: 
font-family: helvetica. arial, sans-serif: 
font-size: 80px: 
font-weight: bold: 
color: #D1D1D1: 
backeground: #CCC: 
text-shadow: -1px -1px white, 

1px 1px #333; 











} 

</style> 

<p>HTML5+CSS3</p> 

演示 效果 如 图 20.26 所 示 。 通 过 左上 和 右 下 各 添加 一 个 1 像素 错位 的 补 色 阴影 营造 一 种 淡淡 的 
立体 效果 。 





| 
| 
| 
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ME 区 下 








图 20.26 定义 凸 起 的 文字 效果 
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【示例 6】 反 向 思维 ， 利 用 上 面 示例 的 设计 思路 ， 也 可 以 设计 一 种 凹 体 效 果 ， 设 计 方 法 就 是 把 上 | 
面 示例 中 左上 和 右 下 阴影 颜色 颠倒 ， 主 要 代码 如 下 : 
<style type="text/css"> 
body { background: #000: } 
PT 








Iargin: 0; 
font-family: helvetica, arial, sans-serif: | 
font-size: 80px: 
font-weight: bold: 
color: #D1D1D1: 
background: #CCC: 
text-shadow: 1px 1px white, 
-1px -1px #333; 

} 

</style> 

<p>HTMLS+CSS3</p> 


演示 效果 如 图 20.27 所 示 。 





20.27 ”定义 目下 的 文字 效果 


【示例 7】 使 用 text-shadow 属性 还 可 以 为 文本 描 边 ， 设 计 方法 是 分 别 为 文本 四 个 边 添加 1 像素 | 
的 实体 阴影 ， 代 码 如 下 所 示 : 
<style type="text/css"> 
body { background: #000: } 
pt{ 


margin:0: 

font-family: helvetica. arial. sans-serif: 
font-size: 80px: 

font-weight: bold: 

color: #D1D1D1: 


background:#CCC: 
text-shadow: -1px 0 black. 
0 1px black. 
1px 0 black. | 
0 -1px black: | 
} | 
</style> | 
<p>HTML5+CSS3</p> | 
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| 2 

| 

| 演示 效果 如 图 20.28 所 示 。 

| 【示例 8】 设 计 阴 影 不 发 生 位 移 ， 同 时 定义 阴影 模糊 显示 ， 这 样 就 可 以 模拟 出 文字 外 发 光 效果 ， 


| <style type="text/css"> 


bt ‘bac |: #000; 
0 


font-family: helvetica, arial, sans-serif: 
font-size: 80px:; 
font-weight: bold: 
color: #D1D1D1: 
background:#CCC: 
text-shadow: 0 0 0.2em #f87, 
000.2em #F87; 
} 
</style> 


<p>HTML5+CSS3</p> 
演示 效果 如 图 20.29 所 示 。 
DO Smeatonsn - Eo [Sootos “le 
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图 20.28 定义 描 边 文字 效果 图 20.29 定义 外 发 光 文字 效果 








20.4 内 容 生 成 和 替换 





content 属性 属于 内 容 生成 和 蔡 换 模块 ， 可 以 为 匹配 的 元 素 动态 生成 内 容 。 这 样 
就 能 够 满足 在 CSS 样式 设计 中 临时 添加 非 结构 性 的 样式 服务 标签 , 或 者 添加 补充 说 
明 性 内 容 等 。 

权威 参考 : http://www.w3.org/TR/css3-content/。 





定义 content 





视频 讲 如 ”content 属性 的 简明 语法 如 下 所 示 : 

content: normal | string | attrO | urlO | counter0 | none: 
取 值 简单 说 明 如 下 : 

回 “normal: 默认 值 。 表 现 与 none 值 相同 。 
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string: 插入 文本 内 容 。 

attr0: 插入 元 素 的 属性 值 。 

url0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 。 
counter0: 计数 器 ， 用 于 插入 排序 标识 。 

none: 无 任何 内 容 。 


示 : content 属性 早 在 CSS 2.1 中 就 被 引入 ， 可 以 使 用 “:before” 和 “:after” 伪 元 素 生成 内 容 。 ， 
此 特性 目前 已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 | 
content 属性 ， 而 不 仅仅 是 “:before” 和 “:after” 伪 元 素 。 | 


在 CSS3 Generated Content 工作 草案 中 ，content 属性 添加 了 更 多 的 特征 ， 例 如 插入 以 及 移 除 文档 | 
内 容 的 能 力 ， 可 以 创建 脚注 、 段 落 注释 等 。 但 目前 还 没有 浏览 器 支持 content 的 扩展 功能 。 | 
【示例 1】 下 面 示例 使 用 content 属性 为 页 面 对 象 添加 外 部 图 像 ， 演 示 效果 如 图 20.30 所 示 。 “| 
<style type="text/css"> 
div:after { 
border: solid 10px red: 
content: url(images/bg.png); /* 在 div 元 素 内 添加 图 片 */ 


消 加 加 加 加 加 





</style> 


<div> 
<h2> 动 态 生 成 的 图 片 </h2> 
</div> 


<《 拟 注意 : content 属性 通常 与 “:after” 及 “:before” 伪 元 素 一 起 使 用 ， 在 对 象 前 或 后 显示 内 容 。 


【示例 2】 下 面 示例 使 用 content 属性 把 超 链接 的 URL 字符 串 动态 显示 在 页 面 中 ， 演 示 效 果 如 
图 20.31 所 示 。 


<style type="text/css"> 
a:after { 
content: attr(href); 
} 
</style> 
<a hre 人 "http://www baidu.com/"> 百 度 </a> 





© | © localhost3080/myste/tes : | 


动态 生成 的 图 片 
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图 20.30 动态 生成 图 像 演示 效果 图 20.31 把 属性 值 显示 在 页 面 中 
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| 20.4.2 案例; 应 用 content 


下 面 结合 多 个 示例 练习 content 在 网 页 中 的 应 用 。 
| 【示例 1】 下 面 示例 使 用 content 属性 ， 配 合 CSS 计数 器 设计 多 层 嵌 套 有 序列 表 序 号 设计 ， 效 果 
| 如 图 20.32 所 示 。 





<style type="text/css"> 
| ol { list-style:none:} 证 清 除 默认 的 序号 */ 
| li:before {color:#f00: font-family:Times New Roman:} /* 设 计 层级 目录 序号 的 字体 样式 */ 
| li{counter-increment:a 1:} 目 设 计 递增 函数 a， 递增 起 始 值 为 1 */ 
| li:before {content:counter(a)". ":} * 把 递增 值 添 加 到 列表 项 前 面 */ 
| ilif{counter-increment:b 1:} 上 设计 递增 函数 b， 递 增 起 始 值 为 1 */ 
| lili:before{fcontent:counter(a)"."counter(b)". ":} ”/* 把 递增 值 添加 到 二 级 列表 项 前 面 */ 
| lilili{counter-increment:c 1:} 片 设 计 递 增 函 数 c， 递 增 起 始 值 为 1 */ 
| ilili'before{fcontent:counter(a)"."counter(b)"."counter(c)". ":} /* 把 递增 值 添加 到 三 级 列表 项 前 面 */ 
| </style> 
| <hl> 网 站 导航 </h1> 
| <ol> 
| <1i> 新 闻 
| <ol> 
| <1i> 国 际 新 闻 </li> 
| <I 记 国内 新 闻 
| <ol> 
| <l 放 互联 网 /科技 </li> 
| <1i> 财 经 /理财 <i> 
| <lol> 
| </> 
| </ol> 
| <> 
| <IP 交 互 <Ii> 
| <ob 
| 
| 
| 
| 
| 
| 
| 





20.32 ”使 用 CSS 技巧 设计 多 级 层级 目录 序号 
【示例 2】 下 面 示例 使 用 content 为 引文 动态 添加 引号 ， 演 示 效 果 如 图 20.33 所 示 。 


<style type="text/css"> 

雍 为 不 同 语言 指定 引号 的 表现 */ 
| ‘lang(en) > q {quotes:™ ™:} 
| :lang(no) >q ole 

| :lang(ch) > q {quo 

| 上 在 村 各 的 前 后 纤 入 下 写 dd 
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qibefore {content:open-quote:} 

dafter {content:close-quote;} 

</style> 

<p lang="no"><q>HTML5+CSS3 从 入 门 到 精通 </q></p> 

<p lang="en"><q>CSS Generated Content Module Level 3</p> 
<p lang="ch"><q>CSS 生成 内 容 模块 3.0</q></p> 


【示例 3】 下 面 示例 使 用 content 为 超 链接 动态 添加 类 型 图 标 ， 演 示 效 果 如 图 20.34 所 示 。 


<style type="text/css"> | 
a[href $=".pdf"']:after { 
content-url(images/icon pdfpng): 





} 
alrel = "external"]:after { 
content-url(images/icon link png): 
} 
</style> 
<a href="http://www.book.com/1688.pdf*>《HTML5+CSS3 从 入 门 到 精通 》</a><br> 
<a href="http://www.book.com/1688/" rel="external">《HTML5+CSS3 从 入 门 到 精通 》</a> 


DE Er 


«HTML5+CS$3 从 入 门 国情 通 » 


| 


HTMLStCSS3 从 入 门 到 精 酒 3 天 
”CSS Generated Contcat Module Level 3" HTMLSCSSMIA 站 到 情理 > 
-~CSS 生 成 内 容 模块 30 J 


herp// mw book.comy ioe 


图 20.33 动态 生成 引号 图 20.34 动态 生成 超 链接 类 型 图 标 





20.5 网 络 字 体 


CSS3 允许 用 户 通 过 @font-face 规则 加 载 网 络 字体 文件 ， 实 现 自 定义 字体 类 型 的 功能 。@font-face 
规则 在 CSS3 规范 中 属于 字体 模块 。 | 
权威 参考 : http://www.w3org/TR/css3-fonts/#font-face。 


20.5.1 使 用 @font-face 


@font-face 规则 的 语法 格式 如 下 : 
@font-face { <font-description> } 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字体 文件 。<font-description> 是 一 个 属性 名 值 | 
对 ， 格 式 类 似 如 下 样式 : 








: 
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属性 及 其 取 值 说 明 如 下 。 
font-family: 设置 文本 的 字体 名 称 。 
font-style: 设置 文本 样式 。 
font-variant: 设置 文本 是 否 大 小 写 。 
font-weight: 设置 文本 的 粗细 。 
font-stretch: 设置 文本 是 否 横向 拉 伸 变形 。 
font-size: 设置 文本 字体 大 小 。 
src: 设置 自 定义 字体 的 相对 或 者 绝对 路 径 。 注 意 ， 该 属性 只 用 在 @font-face 规则 里 。 
示 : 事实 上 ，IE 5 已 经 开始 支持 该 属性 ， 但 是 只 支持 微软 自 有 的 .eot ( Embedded Open Type ) 
字体 格式 ， 而 其 他 浏览 器 直到 现在 都 不 支持 这 一 字体 格式 。 不过， 从 Safari 3.1 开始 ， 用 
户 可 以 设置 ttf ( TrueType ) 和 .otf ( OpenType ) 两 种 字体 作为 自 定 义 字体 了 。 考 虑 到 浏览 
器 的 兼容 性 ， 在 使 用 时 建议 同时 定义 .eot 和 .ttf， 以 便 能 够 兼容 所 有 主流 浏览 器 。 
| 【示例 】 下 面 是 一 个 简单 的 示例 ， 演 示 如 何 使 用 @font-face 规则 在 页 面 中 使 用 网 络 字 体 。 示 例 代 
码 如 下 : 


因 办 办 办 办 办 凶 


DD: 
注 


| 

| 

| 

| 

| 

| <style type="text/css"> 

| 引入 外 部 字体 文件 */ 

| @font-face { 

| 店 选择 默认 的 字体 类 型 */ 

| font-family: "lexograph"; 

| 上 # 兼容 正 */ 

| src: url(http://randsco.com//fonts/lexograph.eot); 

| 此 兼容 非 正 */ 

| src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype"); 
| } 

| nt 

| 此 设置 引入 字体 文件 中 的 lexograph 字体 类 型 */ 

| font-family: lexograph. verdana, sans-serif: 

| font-size:4em:} 

| </style> 

| <hl>http://www.baidu.com/</h1> 

| 
| 
| 


演示 效果 如 图 20.35 所 示 。 


让 Jmysite /test htm 


MOnoBAR 





图 20.35 设置 为 lexograph 字体 类 型 的 文字 


容 提示 : 谈 入 外 部 字体 需要 考虑 用 户 带宽 问题 ， 因 为 一 个 中 文字 体 文件 少 的 有 几 个 MB， 大 的 有 十 
几 个 MB, 这 么 大 的 字体 文件 下 载 过 程 会 出 现 延 迟 ， 同 时 服务 器 也 不 能 忍受 如 此 频繁 的 申 
请 下 载 。 如 果 只 是 想 标 题 使 用 特殊 字体 ， 最 好 设计 成 图 片 。 
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20.5.2 案例: 设计 字体 图 标 


本 节 示 例 通过 @font-face 规则 引入 外 部 字体 文件 glyphicons-halflings-regular.eot, 然后 定义 几 个 字 | 


体 图 标 ， 嵌 入 在 导航 菜单 项 目 中 ， 效 果 如 图 20.36 所 示 。 


Ee (+)- SG htp://ocalho.. - S © | localhost 


会 主页 | 县 登 录 | QQ 搜索 添加 





20.36 设计 包含 字体 图 标的 导航 菜单 
示例 主要 代码 如 下 所 示 : 
<style type="text/css"> 
上 引入 外 部 字体 文件 */ 
@font-face { 
font-family: 'Glyphicons Halflings; 。“/* 选择 默认 的 字体 类 型 */ 
此 外 部 字体 文件 列表 */ 
src: url('fonts/glyphicons-halflings-regular.eot'):; 
src: url('fonts/glyphicons-halflings-regular.eot?#iefix'’) format(‘embedded-opentype’), 
url('fonts/glyphicons-halflings-regular.woff2') format('‘woff2"). 
url('fonts/glyphicons-halflings-regular.woff ) format(‘woff ), 
url('fonts/glyphicons-halflings-regular.ttf) format('truetype'), 
url('fonts/glyphicons-halflings-regular.svg#elyphicons_halflingsregular’) format('svg'); 


} 
谨 定义 字体 图 标 样式 */ 





.glyphicon { 
position: relative: 上 # 相对 定位 */ 
top: 1px: 上 # 相对 向 上 偏 移 1 个 像素 */ 
display: inline-block: 证 行内 块 显示 */ 
font-family: 'Glyphicons Halflings': /# 定义 字体 类 型 */ 
font-style: normal: /# 字体 样式 */ 
font-weight: normal: 上 庆 字体 粗细 */ 
line-height: 1: 雍 定义 行 高 ， 清 除 文本 行 对 图 标的 影响 */ 
-webkit-font-smoothing: antialiased: 庆 兼容 谷歌 浏览 器 解析 */ 
-moz-0sx-font-smoothing: grayscale: 记 兼容 Firefox 浏览 器 解析 */ 
} 


.glyphicon-home:before { content: \e021": } 
.glyphicon-user:before { content: We008": } 
.glyphicon-search:before { content: "We003": } 
.glyphicon-plus:before { content: We081": } 
span {/* 定义 字体 图 标 标签 样式 */ 
font-size: 16px: 
color: red: 


} 
ul tl* 定义 导航 列表 框 样式 ， 清 除 默认 样式 */ 
margin: 0: 


list-style: none: 


. 423 。 











3 FUrrist6sss 入 到 亲生 ( 拔 课 本 大 岳 ) 
eR 


| 
| } 
| 
| li tl# 定义 列表 项 目 样式 ， 水 平 并 列 显示 */ 
| float: left: 

padding: 6px 12px: 

margin: 3pX: 

border: solid 1px hsla(359.93%.69%.0.6): 
border-radius: 6px: 





| lia {/* 定义 超 链接 文本 样式 */ 
font-size: 16px: 

color: Ted: 

text-decoration: none: 


</style> 

<u> 
<li><span class="glyphicon glyphicon-home"></span> <a href="#"> 主 页 </a></li> 
<li><span class="glyphicon glyphicon-user"></span> <a hre 人 ="#"> 登 录 </a></li> 
<li><span class="glyphicon glyphicon-search"></span> <a hre 合 "#"> 搜 索 </a></li> 
<li><span class="glyphicon glyphicon-plus"></span> <a hre 合 "#"> 添 加 </a></i> 

</ul> 


20.6 案例 实战 


本 节 将 以 案例 形式 实战 练习 CSS3 新 增 的 文本 属性 。 
六 20.6.1 设计 黑 科 技 网 站 首页 


本 示例 将 模拟 一 个 黑 科 技 网 站 的 首页 ， 借 助 text-shadow 属性 设计 阴影 效果 ， 通 过 颜色 的 搭配 ， 
营造 一 幅 静 说 而 又 神秘 的 画面 ， 使 用 两 幅 PNG 图 像 对 页 面 效 果 进 行 装饰 和 点 级， 最 后 演示 效果 如 
图 20.37 所 示 。 











也 - En 
可 -Er 和 六 放 











图 20.37 设计 黑 科 技 网 站 首页 


具体 代码 解析 请 扫 码 学 习 。 
.424 。 


第 20 章 CSS3 文 机 样式 “一 ES | 


20.6.2 ”设计 消息 提示 框 


本 节 将 借助 CSS3 增强 的 文本 特性 以 及 相关 动画 功能 ， 设计 一 个 纯 CSS 的 消息 提示 框 ,效果 如 | 
图 20.38 所 示 。 | 





图 20.38 设计 消息 提示 框 


有 具体 操作 步骤 请 扫 码 学 习 。 
20.7 在 线 练 习 


练习 使 用 CSS 设计 各 种 网 页 文本 效果 ， 以 及 各 种 网 页 特效 版 式 和 文本 ， 强 化 基本 功 训练 。 
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CSS3 背景 图 像 和 渐变 背景 


在 CSS 2.1 中 ，background 属性 的 功能 还 无 法 满足 设计 的 需求 ， 为 了 方便 设计 师 更 灵活 
地 设计 需要 的 网 页 效果 ，CSS3 在 原 有 background 基础 上 新 增 了 一 些 功 能 属性 ， 可 以 在 同一 
个 对 象 内 登 加 多 个 背景 图 像 ， 可 以 改变 背景 图 像 的 大 小 尺寸 , 还 可 以 指定 背景 图 像 的 显示 范 
图 ， 以 及 指定 背景 图 像 的 绘制 起 点 等 。 另 外 ，CSS3 允许 用 户 使 用 渐变 函数 绘制 背景 图 像 ， 
这 极 大 地 降低 了 网 页 设计 的 难度 ， 激 发 了 设计 师 的 创意 灵感 。 


【 学 习 重 点 】 


| 


至 吾 至 至 


设置 背景 图 像 的 原点 、 大 小 。 

正确 使 用 背景 图 像 裁 切 属性 。 

灵活 使 用 多 重 背 景 图 像 设计 网 页 版 面 。 
正确 使 用 线性 渐变 和 径 向 渐变 。 
熟练 使 用 渐变 函数 设计 网 页 元 件 。 
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21.1 设计 背景 图 像 


CSS3 增强 了 background 属性 的 功能 ， 允 许 在 同一 个 元 素 内 奏 加 多 个 背景 图 像 ， 还 新 增 了 3 个 与 
背景 相关 的 属性 ; background-clip、background-origin、background-size。 下 面 分 别 进行 介绍 。 
权威 参考 : http://www.w3.org/TR/css3-background/。 


21.1.1 设置 定位 原点 


background-origin 属性 定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ， 
background-position 属性 总 是 根据 元 素 左 上 角 为 坐标 原点 进行 背景 图 像 定 位 。 使 用 background-origin 
属性 可 以 改变 这 种 定位 方式 。 该 属性 的 基本 语法 如 下 所 示 : 
background-origin:border-box | padding-box | content-box: 
取 值 简单 说 明 如 下 : 
border-box: 从 边框 区 域 开始 显示 背景 。 
padding-box: 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 
content-box: 仅 在 内 容 区 域 显示 背景 。 
【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 更 灵活 地 决定 背景 图 像 应 该 显示 的 
位 置 。 下 面 示例 利用 background-origin 属性 重 设 背景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显 
示 ， 演 示 效 果 如 图 21.1 所 示 。 


站 localhort oormpsite 
© [© locamost onen/mys ne /es nm 





高 奴 娇 "赤壁 怀古 


信 轼 


遍 
尽 、 千 古风 信人 物 。 故 全 西边 ， 人 六 是 ， 三 国 周 郎 卉 学 . 自 石 证 守 合 洲 折 和 导 
写 . 江山 如 画 , 一 时 : 


通 想 公 天 当年 ,省 ， 盐 过 英 长 。 羽 局 绽 巾 ， 谈 等 间 ， 柱 格 灵 飞 狠 玉 。 改 国 种 洲 ” 专 悄 应 关 我 


生 华 发 。 人 生 各 萝 ， 一 棵 证 厂 江 月 


图 21.1 设计 诗词 效果 














示例 代码 如 下 所 示 : 

<style type="text/css"> 

div {/* 定 义 包含 框 的 样式 */ 
height: 322px: 
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width: 780px: 

border: solid 1px red: 

padding: 250px 4em 0; 

让 为 了 避免 背景 图 像 重复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ 


全 | background:url(images/p3.jpg) no-repeat: 
| 证 设 计 背 景 图 像 的 定位 华 标 点 为 元 素 边框 的 左上 角 */ 
background-origin:border-box: 
让 将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 */ 


| backeround-size:cover: 
| overflow:hidden; /* 隐 藏 超出 包含 框 的 内 容 */ 
} 
divhl, div h2{/* 定 义 标题 样 式 */ 
font-size:18px; font-family:" 幼 圆 "; 
text-align:center:/* 水 平 居 中 显示 */ 


| 

| 

| 

| 

| divp {/* 定 义 正文 样式 */ 

| text-indent:2em; /* 首 行 缩 进 2 个 字符 */ 

| line-height:2em;  /# 增 大 行 高 ， 让 正文 看 起 来 更 疏 朗 电 

| margin-bottom:2em; 人 # 调 整 底部 边界 ， 增 大 段落 文本 距离 3/ 

| } 

| <syle> 

| <div> 

| <h1> 念 奴 娇 &#8226; 赤 壁 怀古 </h1> 

<h2> 苏 轼 Jh2> 

<p> 大 江东 去 ， 浪 淘 尽 ， 千 古风 流 人 物 。 故 侄 西边 ， 人 道 是 ， 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 
起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> 

| <p> 遥 想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 梭 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 档 榴 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 笑 
| 我， 早生 华发 。 人 生 如 梦 ， 一 尊 还 酷 江 月 。</p> 

| </div> 


21.1.2 ”设置 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁剪 区 域 。 该 属性 的 基本 语法 如 下 所 示 。 
background-clip:border-box | padding-box | content-box | text: 

取 值 简单 说 明 如 下 : 

border-box: 从 边框 区 域 向 外 裁剪 背景 ， 为 默认 值 。 

padding-box: 从 补 白 区 域 向 外 裁剪 背景 。 

回 “content-box: 从 内 容 区 域 向 外 裁剪 背景 。 

回 text: 从 前 景 内 容 〈 如 文字 ) 区域 向 外 裁剪 背景 。 




















容 提示 : 如 果 取 值 为 padding-box， 则 background-image 将 忽略 补 白 边 缘 ， 此 时 边框 区 域 显示 为 
透明 ; 
如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 ; 
| 如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 ; 
| 如 果 background-image 属性 定义 了 多 重 背 景 , 则 background-clip 属性 值 可 以 设置 多 个 值 ， 
| 并 用 过 号 分 隔 。 
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如 果 background-clip 属性 值 为 padding-box，background-origin 属性 取 值 为 border-box, 且 | 
background-position 属性 值 为 "top left"( 默认 初始 值 ), 则 背景 图 左上 角 将 会 被 截取 掉 一 部 分 。 | 


【示例 1】 下 面 示例 演示 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 21.2 所 示 。 


<style type="text/css"> 
div{ 
height:150px: ! 
width:300px: | 
border:solid 50px gray: | 
padding:50px: 
:url(images/bg.jpg) no-Iepeal 
/各 晤 四 优等 比 六 让 汉 半 人 闭关 上 信 检 ， 背景 图 像 有 可 能 超出 包含 框 */ 
background-size:cover: 
/# 将 背景 图 像 从 content 区 域 开始 向 外 裁剪 背景 */ 
background-clip:content-box: 
} 
</style> 





<div></div> 








21.2 ”以 内 容 边 缘 裁 切 背 景 图 像 效 果 


【示例 2】 下 面 示例 同时 定义 background-clip 和 background-origin 属性 值 为 content， 可 以 设计 比 | 
较 特 殊 的 按钮 样式 ， 演 示 效 果 如 图 21.3 所 示 。 


‘<style type="text/css"> 


height:40px: 人 # 固 定 包含 框 大 小 类 


padding:lpx; 。 ”/* 在 内 容 区 留 点 空隙 */ 

cursor:pointer;: 。 /* 定 义 手 形 指针 样式 */ 

color:#ffF: /# 白 色 字体 4/ 

上 # 设 计 立 体 边 框 样式 沁 

border:3px double #95071b: 

border-right-color:#650513:; 

border-bottom-color:#650513: 

/#* 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ 
background-url(images/img6.ipg) no-repeat: 
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个 设 计 背景 图 像 的 定位 举 标 点 为 元 素 内 容 区域 的 左上 角 */ 


background-origin:content-box: 
/设计 背景 图 像 以 内 容 区 域 的 边缘 进行 裁 切 背景 图 像 */ 
background-clip:content-box: 





图 21.3 设计 按钮 效果 
21.1.3 ”设置 背景 图 像 大 小 


background-size 可 以 控制 背景 图 像 的 显示 大 小 。 该 属性 的 基本 语法 如 下 所 示 : 

background-size: [ <length> | <percentage> | auto ]{1.2} | cover | contain: 

取 值 简单 说 明 如 下 : 

<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 

<percentage>: 取 值 为 0 到 100% 之 间 的 值 。 不 可 为 负 值 。 

加 ”cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 覆盖 所 定义 背景 的 区 域 。 

回 ”contain:， 保持 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 背景 区 域 。 

初始 值 为 auto。background-size 属性 可 以 设置 1 个 或 2 个 值 ，1 个 为 必 填 ，1 个 为 可 选 。 其 中 第 
一 个 值 用 于 指定 背景 图 像 的 width， 第 二 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 1 个 值 ， 则 第 
二 个 值 默认 为 auto。 

【示例 】 下 面 示例 使 用 image-size 属性 自由 定制 背景 图 像 的 大 小 ， 让 背景 图 像 自 适 应 盒子 的 大 
小 ， 从 而 可 以 设计 与 模块 大 小 完全 适应 的 背景 图 像 ， 本 示例 效果 如 图 21.4 所 示 ， 只 要 背景 图 像 长 宽 
比 与 元 素 长 宽 比 相同 ， 就 不 用 担心 背景 图 像 变 形 显示 。 














图 21.4 设计 背景 图 像 自 适应 显示 


示例 代码 如 下 所 示 : 
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<style type="text/css"> 
div{ 
marpgin:2px; 
float:left: 
border:solid 1px red: 
人 # 设 计 背 景 图像 完 全 覆盖 元 素 区 域 六 
background-size:cover:} 
此 设计 元 素 大 小 所 
.hl { height:80px: width:110px: } 
.h2 { height:400px: width:550px: } 
</style> 
<div class="h1"></div> 
<div class="h2"></div> 


21.1.4 设置 多 重 背 景 图 像 


CSS3 支持 在 同一 个 元 素 内 定义 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进行 养 加 显示 ， 从 而 使 得 | 
设计 多 图 背景 栏目 变 得 更 加 容易 。 

【示例 1】 本 例 使 用 CSS3 多 背景 设计 花边 框 ， 使 用 background-origin 定义 仅 在 内 容 区 域 显示 背 
景 ， 使 用 background-clip 属性 定义 背景 从 边框 区 域 向 外 裁剪 ， 如 图 21.5 所 示 。 





” 茶 喜 发 对 


9 








图 21.5 设计 花边 框 效果 
示例 代码 如 下 所 示 : 


‘<style type="text/css"> 
.demo { 
必 设 计 元 素 大 小 、 补 白 、 边 框 样式 ， 边 框 为 20 像素 ， 颜 色 与 背景 图 像 色 相同 */ 
width: 400px: padding: 30px 30px: border 20px solid rgba(104. 104. 142.0.5): 
上 * 定 义 圆 角 显示 */ 
border-radius: 10px: 
上 # 定 义 字体 显示 样式 所 
color: #f36: font-size: 80px: font-family:" 隶 书 ":line-height 1.5: text-align: center: 


} 
multipleBg { 
让 定义 5 个 背景 图 ， 分 别 定位 到 4 个 项 角 ， 其 中 前 4 个 禁止 平 铺 ， 最 后 一 个 可 以 平 铺 */ 
background: ul("images/bg-tl png") no-repeat left top. 
url("images/bg-tr. png") no-repeat right top. 
Url("images/bg-bLpng") no-repeat lef bottom. 
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| Url("images/bg-brpng") no-repeat right bottom, 

| Url(images/bg-repeatpng") repeat left top: 

| 让 改变 背景 图 像 的 position 原点 ， 四 采花 都 是 border 原点 ， 而 平 铺 背 景 是 padding 原点 */ 
| background-origin: border-box. border-box, border-box, border-box. padding-box: 

| 让 控制 背景 图 像 的 显示 区 域 ， 所 有 背景 图 像 超过 border 外 边缘 都 将 被 剪 切 掉 3/ 

| 





站 background-clip: border-box: 
} 
a 
<div class="demo multipleBg"> 巷 喜 发 财 </div> 
【示例 2】 在 下面 示例 中 利用 CSS3 多 背景 图 功能 设计 圆 角 栏目 ， 效 果 如 图 21.6 所 示 。 


| 
| 

| <style type="text/css"> 

| Toundbox { 

| padding: 2em: 

| "为 容器 定义 8 个 背景 图 像 */ 
| background-image: url(images/roundbox1/t].gif). 

| url(images/troundbox1/tr.gif). 

| url(images/roundbox1/bl.giD), 

| url(images/roundbox1/br.gif). 

| url(images/roundbox1/right.gif). 

| url(images/roundbox1/left. gif). 

| url(images/roundbox1/top.gif). 

| url(images/roundbox1/bottom.gif): 

| 让 定义 4 个 顶 角 图 像 禁 止 平 铺 ，4 个 边框 图 像 分 别 沿 x 轴 或 y 轴 平 铺 */ 
| background-repeat: no-repeat. 

| no-repeat, 

| no-repeat. 

| no-repeat. 

| Tepeat-y, 

| Tepeat-y. 

| Tepeat-x, 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


Tepeat-X: 
上 # 定 义 4 个 顶 角 图 像 分 别 固定 在 四 个 项 角 位 置 ，4 个 边框 图 像 分 别 固定 在 四 边 位 置 */ 
background-position: left Opx. 
Tight Opx, 
left bottom. 
Tight bottom. 
Tight Opx, 
0px 0px- 
left Opx。 
left bottom: 
background-color: #66CC33: 
} 
</style> 
<div class="roundbox"> 
<h1> 念 奴 娇 &#8226: 赤 壁 怀古 </h1> 
<h2> 苏 轼 </h2> 
<p> 大 江东 去 ， 浪 淘 尽 ， 千 古风 流 人 物 。 故 侄 西边 ， 人 道 是 ， 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 
起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> 
<p> 遥 想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 梭 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 樟 枚 灰飞烟灭 。 故 国 神游 ， 多 情 应 笑 


“432 


第 21] 章 CSS3 背景 图像 和 渐变 普 时 $3 


我 ， 早 生 华 发 。 人 生 如 梦 ， 一 尊 还 栈 江 月 。</p> 
<div> 





图 21.6 定义 多 背景 图 像 
< 注意 : 每 幅 背 景 图 像 的 源 、 定 位 坐标 以 及 平 铺 方式 的 先后 顺序 要 一 一 对 应 。 


安 提示 : 上 面 示例 用 到 了 多 个 背景 属性 : background-image、background-repeat 和 background-position。 
这 些 属性 都 是 CSS 1 中 就 有 的 属性 ， 但 是 在 CSS3 中 ， 允 许 同时 指定 多 个 属性 值 ， 多 个 属 
性 值 以 喜 号 作为 分 隔 符 ， 用 来 指定 多 个 背景 图 像 的 显示 性 质 。 


21.2 设计 渐变 背景 


W3C 于 2010 年 11 月 份 正式 支持 渐变 背景 样式 ， 该 草案 作为 图 像 值 和 图 像 蔡 换 内 容 模块 的 一 部 
分 进行 发 布 。 主 要 包括 linear-gradient() 、 radial-gradient() 、 repeating-linear-gradient() 和 





Tepeating-radial-gradientO 四 个 渐变 函数 。 
权威 参考 : http://dev.w3.org/csswg/css3-images/#gradients。 Tr 
21.2.1 ”定义 线性 渐变 权 且 全 和 





创建 一 个 线性 渐变 ， 至 少 需要 两 个 颜色 ， 也 可 以 选择 设置 一 个 起 点 或 一 个 方向 。 简 明 语法 格式 
如 下 : 
linear-gradient( angle. color-stop1. color-stop2. ...) 
参数 简单 说 明 如 下 : 
angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。 关 键 字 包 括 4 个 ， 说 明 
如 下 。 
> toleft: 设置 渐变 为 从 右 到 左 ， 相 当 于 270deg。 
> toright: 设置 渐变 从 左 到 右 ， 相 当 于 90deg 
> totop: 设置 渐变 从 下 到 上 ， 相 当 于 0deg 
> ”to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180deg。 该 值 为 默认 值 。 


容 提示 : 如 果 创建 对 角 线 渐变 ， 可 以 使 用 to top left (从 右 下 到 左上 ) 类 似 组 合 来 实现 。 
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| color-stop: 用 于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 
| 空格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 〈 不 可 为 负 值 ) ;也 可 以 是 一 个 百分比 值 ， 
| 如 果 是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 

| 【示例 1】 下 面 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 ， 方 向 从 上 到 下 ， 颜 
| 色 由 白色 到 浅 灰 显示 ， 效 果 如 图 21.7 所 示 。 


<style type="text/css"> 


| height:200px: 

| background: linear-gradient(#f., #333): 
} 

</style> 

<div id="demo"></div> 








图 21.7 应 用 简单 的 线性 渐变 效果 
容 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 
设置 一 个 方向 ， 从 上 到 下 ， 覆 闵 默 认 值 。 
linear-gradient(to bottom., #ffF #333):; 
设置 反 向 渐变 ， 从 下 到 上 ， 同 时 调整 起 止 颜色 位 置 。 
linear-gradient(to top. #333., #ffp: 
回 ”使 用 角度 值 设置 方向 。 
| linear-gradient(180deg. #EEF #333): 
| 明确 起 止 颜色 的 具体 位 置 ， 覆 盖 默 认 值 。 
linear-gradient(to bottom, #fPF 0%6. #333 10090): 


容 提示 : 最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 ， 但 是 考虑 到 安全 性 ， 用 户 应 酌情 兼容 旧版 本 
浏览 器 的 私有 属性 。 


Webkit 是 第 一 个 支持 渐变 的 浏览 器 引擎 (Safari 4+)， 它 使 用 -webkit-gradient0 私 有 函数 支持 线性 
| 渐变 样式 ， 简 明 用 法 如 下 : 

-Webkit-gradient(linear point point stop) 

参数 简单 说 明 如 下 : 
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linear: 定义 渐变 类 型 为 线性 渐变 。 | 
point: 定义 渐变 起 始点 和 结束 点 坐标 。 该 参数 支持 数值 、 百 分 比 和 关键 字 ， 如 (0 0) 或 者 (left | 
top) 等 。 关 键 字 包括 top、bottom、left 和 right。 | 


stop: 定义 渐变 色 和 步 长 。 包 括 三 个 值 ， 即 开始 的 颜色 ， 使 用 from(colorvalue) 函 数 定义 ; | 
结束 的 颜色 ， 使 用 to(colorvalue) 函 数 定义 ; 颜色 步 长 ， 使 用 color-stop(value, color value) 定 | 一 一 
义 。color-stop0 函 数 包 含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 
为 0 一 1.0 (或 者 0 一 100%) ， 第 二 个 参数 值 表示 任意 颜色 值 。 
【示例 2】 下 面 示例 针对 示例 1， 兼 容 早期 Webkit 引擎 的 线性 渐变 实现 方法 。 
#demo { 

width:300px; height:200px: 

background: -webkit-eradient(linear. left top. left bottom, from(#fF), to(#333)); 

background: linear-gradient(#ffF #333); 





员 
上 面 示例 定义 线性 渐变 背景 色 ， 从 顶部 到 底部 ， 从 白色 向 浅 灰色 渐变 显示 。 | 
另外 ，Webkit 引擎 也 支持 -webkit-linear-gradient0 私 有 函数 来 设计 线性 渐变 。 该 函数 用 法 与 标准 函 | 
数 linear-gradient0) 语 法 格式 基本 相同 。 | 
Firefox 浏览 器 从 3.6 版 本 开始 支持 渐变 ，Gecko 引擎 定义 了 -moz-linear-gradientO 私 有 函数 来 设计 | 
线性 渐变 。 该 函数 用 法 与 标准 函数 linear-gradient0 语 法 格式 基本 相同 。 唯 一 的 区 别 就 是 ， 当 使 用 关键 | 
字 设 置 渐变 方向 时 ， 不 带 to 关键 字 前 级 ， 关 键 字 语 义 取 反 。 例 如 ， 从 上 到 下 应 用 渐变 ， 标 准 关键 字 | 
为 to bottom，Firefox 私有 属性 可 以 为 top。 | 
【示例 3】 下 面 示例 针对 示例 1， 兼 容 早 期 Gecko 引擎 的 线性 渐变 实现 方法 。 
#demo { 
width:300px: height:200px: 
background: -webkit-eradient(linear, left top, left bottom, from(#f1D), to(#333)); 
background: -moz-linear-gradient(top., #ffF #333): 
background: linear-gradient(#fEF #333); 


} 
21.2.2 ”设计 线性 渐变 样式 


本 节 以 案例 形式 介绍 线性 渐变 中 渐变 方向 和 色 点 的 设置 ， 演 示 设 计 线性 渐变 的 一 般 方法 。 | 
【示例 1】 下面 示例 演示 了 从 左边 开始 的 线性 渐变 。 起 点 是 红色 , 慢 慢 过 渡 到 蓝 色 , 效果 如 图 21.8 | 
所 示 。 


<style type="text/css"> 

#demo { 
width:300px: height:200px: 
background: -webkit-linear-gradient(left red . blue): /* Safari 5.1 -6.0*/ 
background: -0-linear-gradient(left. red. blue): Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(left. red. blue): & /* Firefox 3.6- 15*/ 
background: linear-gradient(to right red . blue): 。”/* 标准 语法 */ 





} 
</style> 
<div id="demo"></div> 
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| 是 


| > 

4 扣 注 意 :第 一 个 参数 值 浙 变 方向 的 设置 不 同 。 

| 【示例 2】 通 过 指定 水 平和 垂直 的 起 始 位 置 来 设计 对 角 渐 变 。 下 面 示 例 演示 了 从 左上 和 角 开 始 ， 到 
| 右 下 角 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 21.9 所 示 。 





#demo { 
width:300px; height:200px: 
background: -webkit-linear-gradient(left top. red . blue);  /* Safari 5.1 -6.0*/ 
background: -o-linear-gradient(left top, red. blue): Opera 11.1 - 12.0 */ 





background: -moz-linear-gradient(left top. red, blue); /* Firefox 3.6- 15 */ 
background: linear-gradient(to bottom right, red , blue); 。 /* 标准 语法 */ 





icanocesos0mysnsr x \ 


localhoct 





i 
| 图 21.8 设计 从 左 到 右 的 线性 渐变 效果 图 21.9 ”设计 对 角 线 性 渐变 效果 
| 

| 【示例 3】 通 过 指定 具体 的 角度 值 ， 可 以 设计 更 多 渐变 方向 。 下 面 示例 演示 了 从 上 到 下 的 线性 渐 
| 变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 21.10 所 示 。 

















#demo { 
width:300px; height:200px: 

| background: -webkit-linear-gradient(-90deg. red, blue): ~ /* Safari5.1 -6.0*/ 
| background: -0-linear-gradient(-90deg., red, blue): Opera 11.1 - 12.0*/ 
| background: -moz-linear-gradient(-90deg. red., blue): |* Firefox 3.6- 15 */ 
| background: linear-gradient(180deg. red, blue): 上 # 标准 语法 */ 
| } 
| on 
| 和 tocaostada/my? x + 
| localhost B080/m 辕 Cl» 至 





图 21.10 设计 从 上 到 下 的 渐变 效果 


< 全 注意 : 渐变 角度 是 指 垂直 线 和 渐变 线 之 间 的 角度 ， 逆 时 针 方 向 计算 。 例 如 ，0deg 将 创建 一 个 从 
下 到 上 的 渐变 ，90deg 将 创建 一 个 从 左 到 右 的 渐变 。 注意 ， 渐 变 起 点 以 负 立轴 为 参考 。 
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但 是 ， 很 多 浏览 器 (如 Chrome、Safari、Firefox 等 ) 使 用 旧 的 标准 : 渐变 角度 是 指 水 平 线 和 渐变 | 
线 之 间 的 角度 ， 道 时 针 方 向 计算 。 例 如 ，0deg 将 创建 一 个 从 左 到 右 的 渐变 ，90deg 将 创建 一 个 从 下 到 | 
上 的 渐变 。 注 意 ， 渐 变 起 点 以 负 X 轴 为 参考 。 | 
兼容 公式 : | 图 








90-x=y | 
其 中 ，x 为 标准 角度 ，y 为 非 标准 角度 。 
【示例 4】 设置 多 个 色 点 。 下 面 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 绿色 ， | 

再 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 21.11 所 示 。 


#demo { 
width:300px; height:200px:; 
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 -6.0*/ 
background: -o-linear-gradient(red, green, blue): /* Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(red, green, blue): /* Firefox 3.6- 15 */ 
background: linear-gradient(red, green, blue); 上 # 标准 语法 */ 





localhosts0s0/mysita/ x 
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21.11 设计 多 色 线 性 渐变 效果 


【示例 5】 设 置 色 点 位 置 。 下 面 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 黄色 ， 快 速 过 渡 到 蓝 色 ， 
再 慢 慢 过 渡 到 绿色 ， 效 果 如 图 21.12 所 示 。 


#demo { 
‘width:300px: height:200px: | 
background: -webkit-linear-gradient(yellow. blue 20%. #0f0): Safari S.1 -6.0*/ | 
background: -o-linear-gradient(yellow, blue 20%, #0fD): /# Opera 11.1 -12.0*/ | 
background: -moz-linear-gradient(yellow. blue 20%. #0fD): * Firefox 3.6- 15 #/ | 
background: linear-gradient(yellow. blue 20%,. #0f0): 证 标准 语法 所 | 
} | 


【示例 6】CSS3 渐变 支持 透明 度 设置 ， 可 用 于 创建 减弱 变 淡 的 效果 。 下 面 示例 演示 了 从 左边 开 | 
始 的 线性 渐变 。 起 点 是 完全 透明 ， 起 点 位 置 为 30%， 慢 慢 过 渡 到 完全 不 透明 的 红色 ， 为 了 更 清晰 地 看 | 
到 半 透 明 效果 ， 示 例 增 加 了 一 层 背 景 图 像 进行 衬托 ， 演 示 效 果 如 图 21.13 所 示 。 


#demo { 
Width:300px: height:200px: 
* Safari 5.1 -6*/ 
background: -webkit-linear-gradient(leftrgba(255.0.0.0) 30%.rgba(255.0.0.1)).url(images/bg.jpg): 
Opera 11.1- 12*/ 
background: -o-linear-gradient(leftrgba(255.0.0.0) 30%.rgba(255.0.0.1)).url(images/bg.jpe): 
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/* Firefox 3.6 - 15*/ 
background: -moz-linear-egradient(left.reba(255.0.0.0) 30% .reba(255.0.0.1)).url(images/bg.jpe): 


证 标准 语法 */ 
background: linear-gradient(to right, rgba(255.0.0.0) 30%, rgba(255.0.0,1)).url(images/bg.jpg): 
background-size:cover: 证 背景 图 像 完全 覆盖 */ 





图 21.12 设计 多 色 线性 渐变 效果 图 21.13 ”设计 半 透 明 线性 渐变 效果 


痊 提示 : 为 了 添加 透明 度 ， 可 以 使 用 rgba0 或 hsla0 函 数 来 定义 色 点 。rgba0 或 hsla0) 函 数 中 最 后 一 
个 参数 可 以 是 从 0 到 1 的 值 ， 它 定义 了 闫 色 的 透明 度 : 0 表示 完全 透明 ，1 表示 完全 不 
透明 。 


21.2.3 案例; 设计 网 页 渐变 色 
为 页 面 设计 渐变 背景 ， 可 以 营造 特殊 的 浏览 气氛 。 本 例 主要 代码 如 下 所 示 : 


<style type="text/css"> 

body { * 让 渐变 背景 填 满 整 个 页 面 */ 
padding: lem: 
margin: 0; 
background: -webkit-linear-gradient(#FF6666. #f¥FFF): /* Safari 5.1 -6.0*/ 
background: -o-linear-gradient(#FF6666. #fnfppD): /* Opera 11.1 - 12.0*/ 
background: -moz-linear-gradient(#FF6666. #fffffp: /(* Firefox 3.6- 15 */ 
background: linear-gradient(#FF6666. #fffff: 上 # 标准 语法 */ 


证 下 滤 镜 ， 兼 容 IE9- 版 本 浏览 器 */ 
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0. startColorStr=#FF6666. endColorStr=#fpffpD: 


} 
hl {/* 定义 标题 样式 */ 
color: white; 
font-size: 18px: 
height: 45px: 
padding-left: 3em: 
line-height: 50px; /* 控制 文本 显示 位 置 */ 
border-bottom: solid 2px red: 
background: url(images/pel.png) no-repeat left center: /* 为 标题 插入 一 个 装饰 图 标 */ 
} 
Pp {text-indent: 2em: }/* 段落 文本 缩 进 2 个 字符 */ 
</style> 
<div class="box"> 
<h1>W3C 发 布 HTMLS5 的 正式 推荐 标准 </h1> 





. 438 . 


第 21] 章 CSS3 背景 图 像 和 渐变 背景 [SS 


<p>2014 年 10 月 28 日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTMLS 的 正式 推荐 标准 (W3C | 
Recommendation)。W3C 在 美国 圣 克 拉 拉 举行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 宣布 了 这 一 | 
消息 。 HTMLS 是 万 维 网 的 核心 语言 一 可 扩展 标记 语言 的 第 5 版 。 在 这 一 版 本 中 ， 增 加 了 支持 Web 应 用 开发 者 | 
的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 | 
和 内 容 在 不 同 用 户 代理 (浏览 器 中 的 互 操作 性 。HTMLS5 是 构建 开放 Web 平 台 的 核心 。</p> | 
<p class="right"> 更 多 <a href="http://www.chinaw3c.org/archives/677/" target=” blank"> 详 细 内 容 </a></p> 

</div> 


预览 效果 如 图 21.14 所 示 。 
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W3C 发 布 HTMLS 的 正式 推荐 标准 
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、 一 致 的 准则 Wech 应 用 和 内 容 在 不 同 用 
的 互 操作 性 HTML 构建 开放 Web 干 冲 的 述 心 - 
更 多 证 经 具 守 





21.14 ”设计 渐变 网 页 背景 色 效果 


【补充 】 
正 早期 版 本 不 支持 CSS 渐变 ， 但 提供 了 渐变 滤 镜 ， 可 以 实现 简单 的 渐变 效果 。 正 浏览 器 渐变 滤 
镜 的 基本 语法 说 明 如 下 。 
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled.startColorStr=iWidth.endColorStr=iWidth) 


该 函数 的 参数 说 明 如 下 : 

enabled: 设置 或 检索 滤 镜 是 否 激活 。 可 选 布 尔 值 ， 包 括 true 和 false， 默 认 值 为 tue， 激 活 

回 startColorStr: 设置 或 检索 色彩 渐变 的 开始 颜色 和 透明 度 。 可 选项 , 其 格式 为 #AARRGGBB。 
AA、RR、GG、BB 为 十 六 进 制 正 整数 ， 取 值 范围 为 00~FF。RR 指定 红色 值 ，GG 指定 绿 
色 值 ，BB 指定 蓝 色 值 。AA 指定 透明 度 ，00 是 完全 透明 ，FF 是 完全 不 透明 。 超 出 取 值 范 
围 的 值 将 被 恢复 为 默认 值 。 取 值 范围 为 杆 F000000 一 #FFFFFFF， 默 认 值 为 本 F0000FF， 即 | 
不 透明 蓝 色 。 

endColorStr: 设置 或 检索 色彩 渐变 的 结束 颜色 和 透明 度 。 默 认 值 为 好 F000000， 即 不 透明 
黑色 。 


< 全 注意 : IE 渐变 小 镜 在 IE 5.5 及 以 上 版 本 浏览 器 中 有 效 。 
21.2.4 案例: 设计 条 纹 背景 


如 果 多 个 色 点 设置 相同 的 起 点 位 置 , 它们 将 产生 一 个 从 一 种 颜色 到 另 一 种 颜色 的 急剧 的 转换 。 从 
效果 来 看 ， 就 是 从 一 种 颜色 突然 改变 到 另 一 种 颜色 ， 这 样 可 以 设计 条 纹 背景 效果 。 
【示例 1】 定 义 一 个 简单 的 条 纹 背景 ， 效 果 如 图 21.15 所 示 。 








i: 
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5 0 从 入 门 到 精通 ( 微 课 精 编 版 ) 
| 有 background: linear-gradient(#cd6600 50%. #0067cd 50%): 
| 

| </style> 

<div id="demo"></div> 


Note | 
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图 21.15 设计 简单 的 条 纹 效果 
【示例 2】 利 用 背景 的 重复 机 制 ， 可 以 创造 出 更 多 的 条 纹 。 示 例 代码 如 下 所 示 : 


#demo { 
height:200px: 
background: linear-gradient(#cd6600 50%, #0067cd 50%): 
background-size: 100% 20%; /* 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 





} 
效果 如 图 21.16 所 示 。 这 样 就 可 以 将 整个 背景 划分 为 10 个 条 纹 ， 每 个 条 纹 的 高 度 一 


< | ETE 





| 
| 
| 
| 
| 
| 
| 
| 21.16 ”设计 重复 显示 的 条 纹 效果 
【示例 3】 如 果 设 计 每 个 条 纹 高 度 不 同 ， 只 要 改变 比例 即 可 ， 示 例 代码 如 下 所 示 ; 
| #demo { 
| height:200px: 
| background: linear-gradient(#cd6600 80%, #0067cd 0%):* 定 义 每 个 条 纹 位 置 占 比 不 同 */ 
| background-size: 100% 20%; /* 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 
} 
| 
| 效果 如 图 21.17 所 示 。 
| 【示例 4】 设计 多 色 条 纹 背 景 ， 代 码 如 下 所 示 : 
#demo { 
| height:200px: 
| 全 定义 三 色 同 宽 背 景 */ 
| background: linear-gradient(#cd6600 33.3%. #0067cd 0. #0067cd 66.6%. #00cd66 0): 
| background-size: 100% 30px: 
| 
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效果 如 图 21.18 所 示 。 
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图 21.17 设计 不 同 高 度 的 条 纹 效 果 图 21.18 设计 多 色 条 纹 效果 
【示例 5】 设 计 密 集 条 纹 格 效果 ， 代 码 如 下 所 示 : 


#demo { 
height:200px: 
background: linear-gradient(rgba(0.0.0..5) 1px, #ffF 1px): 
background-size: 100% 3pX: 


效果 如 图 21.19 所 示 。 
< 人 注意 : IE 不 支持 这 种 设计 效果 。 
【示例 6】 设 计 垂直 条 纹 背 景 ， 只 需要 转换 一 下 宽 和 高 的 设置 方式 ， 具 体 代码 如 下 所 示 : 
#demo { 
height:200px: 
background: linear-gradient(to right #cd6600 50%. #0067cd 0): 
background-size: 20% 100%: 
} 
效果 如 图 21.20 所 示 。 
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图 21.19 设计 密集 条 纹 效 果 图 21.20 设计 垂直 条 纹 效果 
【示例 7】 设 计 简单 的 纹理 背景 ， 代 码 如 下 所 示 : 
#demo { 
background: linear-gradient(45deg. RGBA(0.103.205.0.2) 50%. RGBA(0.103.205.0.1) 50%): 
background-size: SOpx SOpx: 


上 
效果 如 图 21.21 所 示 。 
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图 21.21 设计 简单 的 纹理 效果 


| 忘 提示 : 在 实际 应 用 中 ， 不 建议 使 用 太 多 的 背景 色 ， 一 般 可 以 考虑 使 用 一 种 背景 色 ， 并 在 这 个 颜色 
| 的 深浅 上 设计 变化 。 


; 21.2.5 “定义 重复 线性 渐变 


| 使 用 repeating-linear-gradient() 函 数 可 以 定义 重复 线性 渐变 ， 用 法 与 linear-gradientO 函 数 相 同 ， 用 
| 户 可 以 参考 21.2.1 节 说 明 。 


容 提示 : 使 用 重复 线性 渐变 的 关键 是 要 定义 好 色 点 ， 让 最 后 一 个 颜色 和 第 一 个 颜色 能 够 很 好 地 连接 
起 来 ， 处 理 不 当 将 导致 颜色 的 急剧 变化 。 


【示例 1】 下 面 示例 设计 重复 显示 的 垂直 线性 渐变 ， 颜 色 从 红色 到 蓝 色 ， 间 距 为 20%， 效 果 如 
| 图 21.22 所 示 。 
| <style type="text/css"> 
#demo { 
height:200px:; 
background: repeating-linear-gradient(#f00, #00f 20%, #f00 40%); 
} 
</style> 
<div id="demo"></div> 


| 从 提示 : 使 用 linear-gradient() 可 以 设计 repeating-linear-gradient() 的 效果 ， 例如， 通过 重复 设计 每 一 
个 色 点 ， 或 者 利用 21.2.4 节 设计 条 纹 方法 来 实现 。 
【示例 2】 下 面 示例 设计 重复 线性 渐变 对 角 显示 ， 效 果 如 图 21.23 所 示 。 
#demo { 


height:200px: 
background: repeating-linear-gradient(135deg. #cd6600. #0067cd 20px. #cd6600 40px): 
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图 21.22 ”设计 重复 显示 的 垂直 渐变 效果 图 21.23 设计 重复 显示 的 对 角 渐 变 效果 
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【示例 3】 下 面 示例 设计 使 用 重复 线性 渐变 创建 出 对 角 条 纹 背景 ， 效 果 如 图 21.24 所 示 。 
#demo { 


} 





height:200px: 
background: repeating-linear-gradient(60deg. #cd6600. #cd6600 5%,. #0067cd 0. #0067cd 10%):; 


€ EI Er ” 





图 21.24 设计 重复 显示 的 对 角 条 纹 效果 


21.2.6 ”定义 径 向 渐变 

创建 一 个 径 向 渐变 ， 也 至 少 需要 定义 两 个 颜色 ， 同 时 可 以 指定 渐变 的 中 心 点 位 置 、 形 状 类 型 (加 
形 或 椭圆 形 ) 和 半径 大 小 。 简 明 语 法 格式 如 下 : 

radial-gradient(shape size at position, color-stop1. color-stop2. ...): 

参数 简单 说 明 如 下 : 


回 


四 


shape: 用 来 指定 渐变 的 类 型 ， 包 括 circle( 圆 形 ) 和 ellipse (椭圆 ) 两 种 。 

size: 如 果 类 型 为 circle， 指 定 一 个 值 设 置 圆 的 半径 ， 如 果 类 型 为 ellipse， 指 定 两 个 值 分 别 
设置 椭圆 的 x 轴 和 y 轴 半 径 。 取 值 包括 长 度 值 、 百 分 比 、 关 键 字 。 关 键 字 说 明 如 下 。 

> elosest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 

> ”closest-corner: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 

> ”farthest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 

> farthest-comer: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 














position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 一 个 表示 x 轴 坐 标 ， 第 二 个 表示 | 








视频 讲 








y 轴 坐 标 ; 如 果 只 提供 一 个 值 ， 第 二 个 参数 值 默 认为 50%， 即 center。 取 值 可 以 是 长 度 值 、 | 
百分比 或 者 关键 字 ， 关 键 字 包括 left ( 左 侧 ) 、center (中 心 ) 、right ( 右 侧 ) 、top〈 顶 部) 、! 


center (中 心 ) 、bottom〔 底 部 ) 。 


4 注意 : position 值 位 于 shape 和 size 值 后 面 。 
color-stop: 用 于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 | 


回 


空格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 〈 不 可 为 负 值 ) ; 也 可 以 是 一 个 百分比 值 ， 
如 果 是 百分比 值 ， 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 


【示例 1 在 默认 情况 下 ,渐变 的 中 心 是 center (对 象 中 心 点 )， 渐 变 的 形状 是 ellipse (椭圆 形 )， 
渐变 的 大 小 是 farthest-comer (表示 到 最 远 的 角落 )。 下 面 示例 仅 为 radial-gradient0 函 数 设置 3 个 颜色 | 
值 ， 则 它 将 按 默认 值 绘制 径 向 渐变 效果 ， 如 图 21.25 所 示 。 


<style type="text/css"> 
#demo { 


height:200px: 
。443 。 


2 ZU 从 入 门 到 精通 ( 微 梨 精 编 版 ) 
v 
So 


background: -webkit-radial-eradient(red. green. blue): /* Safari 5.1 -6.0*/ 


background: -0-radial-eradient(red. green. blue): /* Opera 11.6 - 12.0*/ 
background: -moz-radial-eradient(red. green., blue): /* Firefox 3.6- 15 */ 
; background: radial-gradient(red. green, blue): 证 标准 语法 */ 
| | 
医 网 | </style> 


<div id="demo"></div> 
| 痊 提示 : 针对 示例 1， 用户 可 以 继续 尝试 做 下 面 的 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 . 
| 设置 径 向 渐变 形状 类 型 ， 默 认 值 为 ellipse。 


background: radial-gradient(ellipse, Ted green blue); 
设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 
background: radial-gradient(ellipse at center 50%, red, green, blue); 
设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 
background: radial-gradient(farthest-comer red, green, blue): 


| 窑 提示 : 最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 ， 但 是 考虑 到 安全 性 ， 用 户 应 酌情 兼容 旧版 本 
| 浏览 器 的 私有 属性 。 

Webkit 引擎 使 用 -webkit-gradient0 私 有 函数 支持 径 向 渐变 样式 ， 简 明 用 法 如 下 : 
-webkit-gradient(radial, point, radius, stop) 


参数 简单 说 明 如 下 : 
radial: 定义 渐变 类 型 为 径 向 渐变 。 
point: 定义 渐变 中 心 点 坐标 。 该 参数 支持 数值 、 百 分 比 和 关键 字 ， 如 (0 0) 或 者 (left top) 等 。 
关键 字 包括 top、bottom、center、left 和 right。 
radius: 设置 径 向 渐变 的 长 度 ， 该 参数 为 一 个 数值 。 
stop: 定义 渐变 色 和 步 长 。 包 括 三 个 值 ， 即 开始 的 颜色 ， 使 用 from(colorvalue) 函 数 定义 ; 
结束 的 颜色 ， 使 用 to(colorvalue) 函 数 定义 ;颜色 步 长 ， 使 用 color-stop(value，colorvalue) 定 
义 。color-stop0 函 数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 
在 0 到 1.0 之 间 (或 者 0 到 100% 之 间 ) ， 第 二 个 参数 值 表 示 任 意 颜 色 值 。 
【示例 2】 下 面 示例 设计 一 个 红色 圆 球 ,并 逐步 径 向 渐变 为 绿色 背景 ， 兼 容 早期 Webkit 引擎 的 线 
性 渐变 实现 方法 。 代 码 如 下 所 示 : 
<style type="text/css"> 
#demo { 
height:200px: 
刻 Webkit 引擎 私有 用 法 */ 
background: -webkit-gradient(radial. center center. 0. center center 100. from(red). to(green)): 
background: radial-gradient(circle 100px. red. green): /* 标准 的 用 法 */ 


办 办 


| 

| </style> 

| <div id="demo"></div> 
| 
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演示 效果 如 图 21.26 所 示 。 
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图 21.25 设计 简单 的 径 向 渐变 效果 图 21.26 设计 径 向 圆 球 效果 





另外 ，Webkit 引擎 也 支持 -webkit-radial-gradient0 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函 
数 radial-gradient0 语 法 格式 类 似 。 简 明 语 法 格式 如 下 : 

-webkit-radial-eradient(position, shape size, color-stop1. color-stop2. ...); 

Gecko 引擎 定义 了 -moz-radial-gradient() 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函数 
radial-gradientO 语 法 格式 也 类 似 。 简 明 语 法 格式 如 下 : 

-moz-radial-gradient(position, shape size, color-stop1, color-stop2, ...): 


这 提示 : 上 面 两 个 私有 函 数 的 size 和 参数 值 仅 可 设置 关键 字 : closest-side、 closest-corner, farthest-side、 


farthest-cormer、contain 或 cover。 
21.2.7 ”设计 径 向 渐变 样式 


本 节 以 案例 形式 介绍 径 向 渐变 的 灵活 设置 ， 熟 练 掌握 设计 径 向 渐变 的 一 般 方法 。 
【示例 1】 下 面 示例 演示 了 色 点 不 均匀 分 布 的 径 向 渐变 ， 效 果 如 图 21.27 所 示 。 
<style type="text/css"> 





#demo { 
height:200px: 
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%): /* Safari S.1 -6.0*/ 
background: -0-radial-gradient(red 5%. green 15%, blue 60%): Opera 11.6- 12.0*/ 
background: -moz-radial-gradient(red 5%. green 15%,. blue 60%): /* Firefox 3.6- 15 */ 
background: radial-gradient(red 5%, green 15%, blue 60%): 此 标准 语法 */ 

} 

</style> 

<div id="demo"></div> 


【示例 2】shape 参数 定义 了 形状 ， 取 值 包括 circle 和 ellipse， 其 中 circle 表示 圆 形 ，ellipse 表示 
椭圆 形 ， 默 认 值 是 ellipse。 下 面 示例 设计 了 圆 形 径 向 渐变 ， 效 果 如 图 21.28 所 示 。 





#demo { 
height:200px: 
background: -webkit-radial-gradient(circle, red., yellow. green): /* Safari5.1 -6.0*/ 
background: -0o-radial-eradient(circle. red. yellow. green): Opera 11.6 - 12.0*/ 
background: -moz-radial-gradient(circle, red, yellow, green):  /*Firefox3.6-15*/ 
background: radial-gradient(circle. red. yellow. green): 上 # 标准 语法 */ 
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| 
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| 图 21.27 设计 色 点 不 均匀 分 布 的 径 向 渐变 效果 图 21.28 设计 圆 形 径 向 渐变 效果 
| 【示例 3】 下 面 设计 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆心 最 近 的 边 ， 效 果 如 图 21.29 所 示 。 
| #demo { 

| 总 。 

| height:200px: 

| 


/* Safari 5.1 -6.0 */ 
background: -webkit-radial-gradient(60% 55%, closest-side.blue.green,yellow.,black): 
* Opera 11.6 - 12.0*/ 
background: -0-radial-gradient(60% 55%, closest-side,blue,green.yellow,black); 
| /(* Firefox 3.6- 15 */ 
| background: -moz-radial-gradient(60% 55%, closest-side.blue,green.yellow.black): 
| 证 标准 语法 */ 
background: radial-gradient(closest-side at 60% S596. blue.green.yellow.blaclo): 


| 4WW 注意 :radial-eradientO 标 准 函 孝 与 各 私有 函数 在 设置 参数 时 存在 顺序 区 别 。 


| 

| 【示例 4】 下 面 示例 模拟 太阳 初 升 的 效果 ， 如 图 21.30 所 示 。 设 计 径 向 渐变 中 心 点 
| 半径 为 最 大 化 显示 ， 定 义 3 个 色 点 ， 第 一 个 色 点 设计 太阳 效果 ， 第 二 个 色 点 设计 太阳 余 
设计 太空 色 ， 第 一 个 色 点 和 第 二 个 色 点 距离 为 60 像素 。 


I #demo { 

| height:200px: 

| * Safari 5.1 -6.0*/ 

background: -webkit-radial-eradient(left bottom, farthest-side, #f00, #f99 60px, #005); 
Opera 11.6- 12.0*/ 

background: -0-radial-gradient(left bottom, farthest-side, #f00. #f99 60px. #005); 

| * Firefox 3.6- 15*/ 

| background: -moz-radial-gradient(left bottom, farthest-side. #f00, #{99 60px, #005); 

| 谨 标准 语法 */ 

background: radial-gradient(farthest-side at left bottom. #f00. #f99 60px. #005): 








EECTECD ET 














图 21.29 设计 最 小 限度 的 径 向 渐变 效果 图 21.30 ”模拟 太阳 初 升 效果 
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【示例 S】 下 面 示例 模拟 太阳 旗 效 果 ， 如 图 21.31 所 示 。 设 计 径 向 渐变 中 心 点 位 于 对 象 中 央 ， 定 | 
义 两 个 色 点 ， 第 一 个 色 点 设计 太阳 效果 ， 第 二 个 色 点 设计 背景 ， 两 个 色 点 位 置 相同 。 


<style type="text/css"> 

body { background:hsla(207.5996.7896.1.00) } | 全 fF 

#demo { Fn 
Co te 
width:300px: | Jote 
margin:auto; | 


* Safari 5.1 - 6.0*/ | 
background: -webkit-radial-gradient(center circle, #f00 S0px. #fF S0px): 
* Opera 11.6- 12.0*/ 
background: -0-radial-gradient(center, circle, #f00 50px, #fF SOpx):; 
/* Firefox 3.6- 15*/ 
background: -moz-radial-gradient(center, circle. #f00 50px, #ffF 50px); 
语 标准 语法 */ 
background: radial-gradient(circle at center, #f00 S0px. #fff 50px): 

上 

</style> 

<div id="demo"></div> 





图 21.31 设计 太阳 旗 效果 


21.2.8 ”定义 重复 径 向 渐变 


使 用 repeating-radial-gradient() 函 数 可 以 定义 重复 线性 渐变 ， 用 法 与 radial-gradientO 函 数 相同 , 用 | 
户 可 以 参考 上 面 说 明 。 
【示例 1】 下 面 示例 设计 三 色 重复 显示 的 径 向 渐变 ， 效 果 如 图 21.32 所 示 。 


<style type="text/css"> 
#demo { 
height:200px: 
/* Safari 5.1 - 6.0*/ 
background: -webkit-repeating-radial-gradient(red. yellow 10%., green 15%): 
*Opera 11.6 - 12.0*/ 
background: -0-repeating-radial-gradient(red. yellow 10%. green 15%): 
/* Firefox 3.6- 15 */ 
background: -moz-repeating-radial-eradient(red. yellow 10%. green 15%): 
上 # 标准 语法 */ 
background: repeating-radial-eradient(red. yellow 10%. green 15%): 
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图 21.32 设计 重复 显示 的 径 向 渐变 效果 


【示例 2】 使 用 径 向 渐变 同样 可 以 创建 条 纹 背景 ， 方 法 与 线性 渐变 类 似 。 下 面 示例 设计 圆 形 径 向 
渐变 条 纹 背景 ， 效 果 如 图 21.33 所 示 。 


#demo { 

height:200px: 

/* Safari 5.1 - 6.0 */ 

background: -webkit-repeating-radial-gradient(center bottom, circle, #00a340., #00a340 20px, #d8ffe7 20px, 
#d8ffe7 40px); 

/* Opera 11.6- 12.0*/ 

: -0-repeating-radial-gradient(center bottom, circle, #00a340, #00a340 20px. #d8ffe7 20px, 

#d8ffe7 40px): 

/* Firefox 3.6- 15*/ 

background: -moz-repeating-radial-gradient(center bottom, circle, #00a340, #00a340 20px, #d8ffe7 20px, 





图 21.33 ”设计 径 向 渐变 条 纹 背 景 效果 
21.2.9 案例 : 设计 网 页 背景 色 





【示例 1】 为 页 面倒 加 多 个 径 向 渐变 背景 ， 可 以 营造 虚幻 的 页 面 氛 围 。 示 例 代码 如 下 所 示 : 
<style type="text/css"> 
html, body{ height:100%:} 
body { 
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background-color: #4B770A: 

backeround-image: 
Tadial-gradient( reba(255. 255, 255. 0.3). reba(255, 255, 255. 0)). 
Tadial-gradient(at 10% 5%,. reba(255. 255., 255. 0.1). rgba(255, 255. 255. 0) 20%). 
Tadial-gradient(at left bottom . rgba(255, 255, 255. 0.2). rgba(255., 255. 255. 0) 20%). 
Tadial-gradient(at right top. rgba(255. 255, 255, 0.2). rgba(255. 255. 255. 0) 20%). 
Tadial-gradient(at 85% 90% . rgba(255. 255, 255., 0.1). reba(255, 255. 255. 0) 20%):; 





} ! 
</style> | 


预览 效果 如 图 21.34 所 示 。 





图 21.34 设计 多 个 径 向 渐变 背景 效果 


在 上 面 示例 代码 中 ， 首 先 设计 body 高 度 满 屏 显示 ， 避 免 无 内 容 时 看 不 到 效果 ; 然后 为 页 面 定义 
-个 基本 色 #4B770A; 再 设计 5 个 径 向 渐变 ， 分 别 散布 于 页 面 四 个 顶 角 ， 以 及 中 央 位 置 ， 同 时 定义 径 
向 渐变 的 第 一 个 颜色 为 半 透 明 的 白色 ,第 二 个 颜色 为 透明 色 ， 从 而 在 页 面 不 同位 置 蒙 上 轻重 不 一 的 白 
粉 效果 ， 以 此 来 模拟 虚幻 莫 测 的 背景 效果 。 

【示例 2】 为 页 面 基 加 4 个 径 向 渐变 背景 ， 设 计 密密麻麻 的 针脚 纹理 效果 。 示 例 代码 如 下 所 示 : 


<style type="text/css"> 
html, body{ height:100%:} 
body { 
background-color: #282828: 
background-image: 
-webkit-radial-gradient(black 15%,. transparent 16%). 
-webkit-radial-gradient(black 15%, transparent 16%). 
-webkit-radial-gradient(reba(255. 255. 255. 0.1) 1596. transparent 20%). | 
-webkit-radial-gradient(reba(255. 255. 255. 0.1) 15%. transparent 20%): | 
background-image: 
radial-gradient(black 1596. transparent 16%). 
radial-gradient(black 15%,. transparent 169%). 
radial-gradient(rgba(255, 255. 255. 0.1) 15%. transparent 20%). 
radial-gradient(rgba(255. 255. 255. 0.1) 15%. transparent 20%): 
0 Opx, 
8px 8px, 
0 1px, 
8px 9px: 
background-size: 16px 16px: 
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} 
</style> 


预览 效果 如 图 21.35 所 示 。 











国 岂 : 
第 各 小 可 图 21.35 ”设计 针脚 纹理 背景 效果 








在 上 面 示例 中 ， 首 先 使 用 “background-size: 16px 16px;” 定 义 背 景 图 大 小 为 16X 16 像素 ; 在 这 
块 小 图 上 设计 4 个 径 向 渐变 , 包括 两 个 深 色 径 向 渐变 和 两 个 浅 色 径 向 渐变 ; 使 用 “background-position: 
0 0px, 8px 8px, 0 1px, 8px 9px;” 设 计 一 深 、 一 浅 径 向 渐变 错位 车 加 ， 在 y 轴 上 错位 1 个 像素 ， 从 而 在 
| 16X16 大 小 的 浅 色 背 景 图 上 设计 两 个 深 色 凹陷 效果 最后， 借助 背景 图 平 铺 ， 为 网 页 设计 上 述 纹理 
| 特效 。 

21.2.10 ”案例 : 设计 图 标 

本 例 通过 CSS3 径 向 渐变 制作 圆 形 图 标 特效 ， 设 计 效 果 如 图 21.36 所 示 。 在 内 部 样式 表 中 ， 使 用 
radial-gradient0 函 数 为 图 标 标签 定义 径 向 渐变 背景 ， 设 计 立 体 效果 ， 使 用 “border-radius:50%;” 声 明 


定义 图 标 显示 为 圆 形 ， 使 用 box-shadow 属性 为 图 标 添加 投影 ， 使 用 text-shadow 属性 为 图 标 文 本 定义 
润 边 效果 ;使 用 radial-gradient 设计 环形 径 向 渐变 效果 ， 为 图 标 添加 高 亮 特效 。 















图 21.36 设计 径 向 渐变 图 标 效果 








| 
| 
| 示例 主要 代码 如 下 : 
| <style type="text/css"> 


-icon { 
上 # 固定 大 小 ， 可 根据 实际 需要 酌情 调整 ， 调 整 时 应 同步 调整 line-height-60px: */ 
| width: 60px: height: 60px: 
| 谨 行内 块 显示 ， 统 一 图 标 显示 属性 */ 
| display:inline-block: 
请 清除 边框 ， 避 免 边框 对 整体 特效 的 破坏 */ 
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border none: 

刻 设计 圆 形 效果 */ | 

border-radius: 5096: | 

庆 定义 图 标 阴 影 ， 第 一 个 外 阴影 设计 立体 效果 ， 第 二 个 内 阴影 设计 高 亮 特效 */ | 

box-shadow: 0 1px 5px rgba(255.255,255..5) inset, | 

0 -2px Spx rgba(0.0.0..3) inset, 0 3px 8px Tgba(0.0.0..8): 本 

庆 定义 径 向 渐变 ， 模 拟 明暗 变化 的 表面 效果 */ 

background: -webkit-radial-gradient( circle at top center #f28fb8., #e982ad., #ec568c): 

background: radial-gradient(circle at top center #f28fb8. #e982ad., #ec568c): | 

店 定义 图 标 字 体 样 式 */ | 

font-size: 32px:; | 

color: #dd5183: | 

text-align:center;: 。 /# 文本 水 平 居中 显示 */ | 

line-height:60px; ”上 # 文本 垂直 居中 显示 ， 必 须 与 height: 60px: 保 持 一 致 */ | 

店 为 文本 添加 阴影 ， 第 一 个 阴影 设计 立体 效果 ， 第 二 个 阴影 定义 高 亮 特效 */ | 

text-shadow: 0 3px 10px #f1a2c1, 

0 -3px 10px #f1a2c1:; | 

} | 
</style> | 
<div class="icon">Dw</div> 
<span class="icon">Fl</span> 
<p class="icon">PS</p> 





21.3 案例 实战 


本 节 将 通过 多 个 较 复杂 案例 练习 背景 样式 的 实际 应 用 。 
21.3.1 设计 优惠 券 
本 例 使 用 径 向 渐变 设计 一 张 优惠 券 效 果 ， 如 图 21.37 所 示 。 可 二 潜 轩 





上 品 折扣 店 ; 副 券 


¥50.00 == | Pe 
洒 间 汽 100 0 











图 21.37 设计 优惠 券 效 果 
具体 代码 解析 请 扫 码 学 习 。 
21.3.2 ”设计 桌面 纹理 背景 


本 例 使 用 CSS3 线性 渐变 属性 制作 纹理 图 案 ， 主 要 利用 多 重 背景 进行 设计 ， 然 后 使 用 线性 渐变 绘 | 视频 讲解 
制 每 个 小 方块 的 线条 效果 ， 通 过 者 加 和 平 铺 ， 完 成 重复 性 纹理 背景 效果 ， 如 图 21.38 所 示 。 








.451 。 














过 DS 


ew ET 


= 


线 上 阅读 图 21.38 定义 网 页 纹理 背景 效果 
具体 代码 解析 请 扫 码 学 习 。 


21.3.3 ”设计 按钮 
本 节 提供 了 两 个 经 典 案例 , 分别 介绍 了 不 同 风格 的 按钮 样式 设计 ， 效 果 如 图 21.39 和 图 21.40 所 示 。 





¢ | Grr ET «Gurr Er | «Gr rem Ey 
使 用 线性 渐变 设计 立体 动态 按钮 效 果 使 用 线性 潮 交 设计 i 使 用 线性 渐变 设计 立体 动态 按钮 效 果 
十 





(a) 默认 从 上 到 下 渐变 (b) 鼠标 经 过 从 下 到 上 渐变 (c) 激活 时 下 移 1 像素 
图 21.39 设计 按钮 效果 


Dlocahosy ritenest nt x 





21.40 ”设计 精致 的 按钮 





具体 代码 解析 请 扫 码 学 习 。 
21.3.4 渐变 特殊 应 用 场景 


渐变 可 以 用 在 包括 border-image-source、background-image 、list-style-image、cursor 等 属性 上 ， 
用 来 取代 url 属性 值 。 前 面 各 节 主 要 针对 background-image 属性 进行 介绍 ， 下 面 结合 示例 介绍 其 他 属 
性 的 应 用 情形 。 
| 加 定义 渐变 效果 的 边框 。 
定义 填充 内 容 效果 。 
定义 列表 图 标 。 
详细 代码 解析 请 扫 码 学 习 。 
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21.3.5 ”设计 栏目 折 角 效果 


SS 
灵活 使 用 CSS3 渐变 背景 , 可 以 创新 出 很 多 新 颖 的 设计 。 例 如 , 设计 缺 角 效果 , 如 图 21.41 和 图 21.42 
所 示 。 









































W3C 发 布 HTML5 的 正式 推荐 标准 











图 21.41 设计 缺 角 栏 目 效果 图 21.42 设计 补 角 栏 目 效果 
设计 折 边 效果 ， 如 图 21.43 和 图 21.44 所 示 。 


























21.44 ”设计 缺 角 边 框 栏目 效果 





详细 代码 解析 请 扫 码 学 三 


21.4 在 线 练 习 


练习 使 用 CSS3 设计 各 种 网 页 图 像 效 果 ， 以 及 各 种 网 页 背景 图 像 特效 ， 
强化 基本 功 训练 。 
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CSS3 用 户 接口 样式 


2015 年 4 月 , W3C 的 CSS 工作 组 发 布 CSS 基本 用 户 接口 模块 ( CSS Basic User Interface 
Module Level 3，CSS3 UI ) 的 标准 工作 草案 。 该 文档 描述 了 CSS3 中 对 HIML、XML 进行 
样式 处 理 所 需 的 与 用 户 界面 相关 的 CSS 选择 器 、 属 性 及 属性 值 。 该 模块 负责 控制 与 用 户 接 
口 界面 相关 效果 的 呈现 方式 ， 它 包含 并 扩展 了 在 CSS 2 及 Selector 规范 中 定义 的 与 用 户 接口 
有 关 的 特性 。 

权威 参考 : http://www.w3.org/TR/css-ui-3/ 

[phe tlo| 





回 总 
权威 参考 
【 学 习 重 点 】 

MH 了 解 常用 界面 显示 属性 。 
MI 能 够 定义 轮 廉 样式。 

MH 正确 设计 边框 图 像样 式 。 
WH “灵活 设计 国 角 样式 。 

MH 灵活 设计 阴影 样式 。 
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22.1 界面 显示 


下 面 介绍 CSS3 用 户 界面 的 显示 方式 、 显 示 大 小 和 溢出 处 理 问题 。 
22.1.1 显示 方式 


一 般 浏 览 器 都 支持 两 种 显示 模式 : 怪异 模式 和 标准 模式 。 在 怪异 模式 下 ，border 和 padding 包含 | 
在 width 或 height 之 内 ; 在 标准 模式 下 ，border、padding、width 或 height 是 各 自 独立 区 域 。 
为 了 兼顾 这 两 种 解析 模式 ，CSS3 定义 了 box-sizing 属性 ， 该 属性 能 够 定义 对 象 尺寸 的 解析 方式 。 | 
box-sizing 属性 的 基本 语法 如 下 所 示 。 | 
box-sizing : content-box | border-box: 
取 什 简单 说 明 如 下 : | 
content-box: 为 默认 值 ，padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 | 
实际 宽度 等 于 设置 的 width 值 和 border、padding 之 和 ， 即 元 素 的 宽度 = width + border + | 
padding。 
border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 宽度 就 等 
于 设置 的 width 值 , 即使 定义 有 border 和 padding 也 不 会 改变 对 象 的 实际 宽度 , 即 元 素 的 宽 
度 =width。 
【示例 】 下 面 示例 设计 两 个 相同 样式 的 盒子 ， 在 怪异 模式 和 标准 模式 下 比较 显示 效果 ， 如 图 22.1 
所 示 。 





加 








图 22.1 标准 模式 和 怪异 模式 解析 比较 


从 图 22.1 可 以 看 到 ， 在 怪异 模式 下 width 属性 值 就 是 指 元 素 的 实际 宽度 ， 即 width 属性 值 中 包含 | 
padding 和 border 属性 值 。 


<style type="text/css"> 





div{ | 
float: left: 从 并 列 显示 */ | 
height: 100px: 此 元 素 的 高 度 所 | 
width: 100px: 上 请 元 素 的 宽度 *#/ | 
border: 50px solid red: 诊 边框 林 | 
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v 
margin: 10px: 诺 外 边 距 */ 
padding: S0px: 上 # 内 边 距 */ 
} 
.border-box { box-sizing: border-box:} ”/* 怪异 模式 解析 */ 
</style> 
<div> 标 准 模式 </div> 


<div class="border-box"> 怪 异 模式 </div> 


| 22.1.2 ”调整 尺寸 


为 了 增强 用 户 体验 ，CSS3 增加 了 resize 属性 ， 人 允许 用 户 通过 拖 动 的 方式 改变 元 素 的 尺寸 。resize 


| 
| 属性 的 基本 语法 如 下 所 示 : 


Tesize:none | both | horizontal | vertical | inherit 

取 值 简单 说 明 如 下 : 

none: 为 默认 值 ， 不 允许 用 户 调整 元 素 大 小 。 

回 both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 

horizontal: 用 户 可 以 调节 元 素 的 宽度 。 

vertical: 用 户 可 以 调节 元 素 的 高 度 。 

目前 除了 正 浏览 器 外 ， 其 他 主流 浏览 器 都 基本 支持 该 属性 。 

【示例 】 下 面 示例 演示 如 何 使 用 resize 属性 设计 自由 调整 大 小 的 图 片 ， 如 图 22.2 所 示 。 


加 


加 











(a) 默认 大 小 (b) 鼠标 拖 动 放大 
图 22.2 调节 元 素 尺寸 


<style type="text/css"> 
#resize { 
让 以 背景 方式 显示 图 像 ， 这 样 可 以 更 轻松 地 控制 缩放 操作 */ 
background:url(images/1.jpg) no-repeat center: 
店 设 计 背 景 图 像 仅 在 内 容 区 域 显示 ， 留 出 补 白 区 域 */ 
background-clip:content: 
刻 设 计 元 素 最 小 和 最 大 显示 尺寸 ， 用 户 也 只 能 够 在 该 范围 内 自由 调整 */ 
width:200px: height:120px: 
max-width:800px: max-height:600px: 
padding:6px: border: 1px solid red: 
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证 必须 同时 定义 overflow 和 resize， 否 则 resize 属性 声明 无 效 ， 元 素 默 认 滋 出 显示 为 visible*/ 
resize: both: 
‘overflow: auto: 


} 
</style> 
<div id="resize"></div> 


22.1.3 ”缩放 比例 


zoom 是 正 的 专 有 属性 ， 用 于 设置 对 象 的 缩放 比例 ， 另 外 它 还 可 以 触发 正 的 haslayout 属性 ， 清 
除 浮动 ， 清 除 margin 重 车 等 ， 设 计 师 常用 这 个 属性 解决 正 浏览 器 存在 的 布局 Bug。 
CSS3 支持 该 属性 ， 基 本 语法 如 下 所 示 : 
Zoom:normal | <number> | <percentage> 
取 值 说 明 如 下 : 
normal: 使 用 对 象 的 实际 尺寸 。 
<number>: 用 浮 点 数 来 定义 缩放 比例 ， 不 允许 负 值 。 
<percentage>: 用 百分比 来 定义 缩放 比例 ， 不 允许 负 值 。 
目前 ， 除 了 Firefox 浏览 器 之 外 ， 所 有 主流 浏览 器 都 支持 该 属性 。 
【示例 】 下 面 示例 使 用 zoom 放大 第 2 幅 图 片 为 原来 的 2 倍 ， 比 较 效果 如 图 22.3 所 示 。 








<style type="text/css"> 
img { 
height: 200px: 
margin-right: 6PX: 
} 
img.zoom { zoom: 2: } 
</style> 
<img src="images/bg.jpe"/> 
<img class="zoom" src="images/bg.jpg"/> 








图 22.3 ”放大 图 片 显 示 尺寸 
当 zoom 属性 值 为 1.0 或 100% 时 ,相当 于 normal, 表示 不 缩放 .小 于 1 的 正 数 ,表示 缩小 ,如 “zoom: 
0.5;” 表 示 缩 小 一 倍 。 
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22.2 轮廓 样式 


民办 
轮廓 与 边框 不 同 ， 它 不 占用 空间 ， 且 不 一 定 是 人形。 轮 廊 属 于 动态 样式 ， 只 有 当 对 捕获 取 焦点 或 
Note 者 被 激活 时 呈现 ， 如 在 按钮 、 活 动 窗 体 域 、 图 形 地 图 等 周围 添加 一 圈 轮 廊 线 ， 使 对 象 突出 显示 。 


| 22.2.1 定义 轮廓 


outline 属性 可 以 定义 块 元 素 的 轮廓 线 ， 该 属性 在 CSS 2.1 规范 中 已 被 明确 定义 ， 但 是 并 未 得 到 各 
主流 浏览 器 的 广泛 支持 ，CSS3 增强 了 该 特性 。outline 属性 的 基本 语法 如 下 所 示 : 
outline:<outline-width> || <outline-style> || <'‘outline-color> || <outline-offset> 
取 值 简单 说 明 如 下 : 
<'outline-width'>: 指定 轮廓 边框 的 宽度 。 
<'outline-style'>: 指定 轮廓 边框 的 样式 。 
<'outline-color'>: 指定 轮廓 边框 的 颜色 。 
| <'outline-offset>: 指定 轮廓 边框 偏 移 值 。 
4 注意 :outline 创建 的 轮 廊 线 是 画 在 一 个 框 “ 上 面 "， 也 就 是 说 ， 轮 廊 线 总 是 在 顶 上 ， 不 会 影响 该 杠 
或 任何 其 他 框 的 尺寸 。 因此 , 显示 或 不 显示 轮廓 线 不 会 影响 文档 流 , 也 不 会 破坏 网 页 布局 。 
轮廓 线 可 能 是 非 矩形 的 。 例 如 ， 如 果 元 素 被 分 割 在 好 几 行 ， 那 么 轮廓 线 就 至 少 是 能 要 包含 该 元 素 
| 所 有 框 的 外 廊 。 和 边框 不 同 的 是 ， 外 廊 在 线 框 的 起 旋 端 都 不 是 开放 的 ， 它 总 是 完全 闭合 的 。 
| 【示例 】 下 面 示例 设计 当 文本 框 获得 焦点 时 ， 在 周围 画 一 个 粗 实 线 外 廊 ， 提 醒 用 户 交互 效果 , 效 
| 果 如 图 22.4 所 示 。 





视频 讲解 





加 加 加 


@ Glocalhost/mysite/test htm 


[3 
Wawa A 








(a) 默认 状态 (b) 激活 状态 (c) 获取 焦点 状态 
图 22.4 设计 文本 框 的 轮廓 线 


<style type="text/css"> 

证 统一 页 面 字体 和 大 小 */ 

| body{ 

| font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana. Arial. Helvetica. sans-serif: 
| font-size: 12px: 
| 





} 
/清除 常用 元 素 的 边界 、 补 白 、 边 框 默认 样式 
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y 
P: hl. form, button { border:0: margin:0; padding:0:} 
上 # 定 义 一 个 强制 换行 显示 类 所 
.Spacer { clear:both; height: 1px:} 
族 定 义 表单 外 框 样式 */ 
nyform {margin:0 auto: width:400px: padding:14px:} 
必定 制 当 前 表单 样式 */ 


#stylized { border:solid 2px #b7ddf2:; backeround:#ebf4fb:;} 
让 设计 表单 内 div 和 了 了 通用 样式 效果 */ Ee 


#stylized hl {font-size:14px: font-weight:bold:margin-bottom: 8px:} 
#stylizedp { 
font-size:11px; color:#666666; 
margin-bottom:20px; padding-bottom:10px: 
border-bottom:solid 1px #b7ddf2; 





} 

#stylized label {/* 定 义 表单 标签 样式 */ 
display:block: width: 140px; 
font-weight:bold; text-align:right: 
float:left: 


} 

人 # 定 义 小 字体 样式 类 姑 

#stylized .small { 
Color:#666666; font-size:11px: font-weight:normal: text-align:right:; 
display:block:; width:140px: 


} 
上 # 统 一 输入 文本 框 样式 志 
#stylized input { 
float:left: 
font-size: 12px; 
padding:4px 2px: margin:2px 0 20px 10px: 
border:solid 1px #aacfe4; width:200px: 


} 
让 定义 图 形 化 按钮 样式 */ 
#stylized button { 
clear:both: 
margin-left:150px: 
width:125px: height:31px: 
background:#666666 url(images/button.png) no-repeat: 
text-align:center: line-height:31px: color:#FFFFFF: font-size:11px: font-weight:bold: 


} 

让 设计 表单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 */ 

input:focus. button:focus { outline: thick solid #b7ddf2 } 

input:active. button:active 《outline: thick solid #aaa } 

</style> 

<div id="stylized" class="myform"> 

<form id="form1" name="forml" method="post" action=""> 

<hl> 登 录 </hl> 
<p> 请 准确 填写 个 人 信息 .</p> 
<label>Name <span class="small"> 姓 名 </span> </label> 
<input type="text" name="textfield" id="textfield" /> 
<label>Email <span class="small"> 电 子 邮 箱 </span> </label> 
<input type="text" name="textfield" id="textfield" /> 
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| <label>Password <span class="small"> 密 码 </span> </label> 
| <input type="text" name="textfield" id="textfield" /> 

| <button type="submit"> 登 录 </button> 

<div class="spacer"></div> 


| 22.2.2 ”设计 轮廓 线 


CSS3 为 轮廓 定义 了 很 多 属性 ， 使 用 这 些 属性 可 以 设计 轮廓 线 样式 。 
| 1. 设置 宽度 

| outline-width 属性 可 以 设置 轮廓 线 的 宽度 。 基 本 语法 如 下 所 示 : 
| outline-width:<length> | thin | medium | thick 
| 取 值 简单 说 明 如 下 : 

| <length> : 定义 轮廓 粗细 的 值 。 
| 

| 





thin: 定义 细 轮 廓 。 
medium: 定义 中 等 的 轮廓 ， 为 默认 值 。 
thick: 定义 粗 的 轮廓 。 
| 4 全 注意 : 只 有 当 轮 廊 样 式 不 是 none 时 ， 该 属性 才 会 起 作用 。 如 果 样式 为 hone， 宽 度 实际 上 会 重 置 


图 回 


| 为 0。 不 允许 设置 负 长 度 值 。 
| 2. 设置 样式 

| outline-style 属性 可 以 设置 轮廓 线 的 样式 。 基 本 语法 如 下 所 示 : 

| ‘outline-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset 

| 取 值 简单 说 明 如 下 : 

| none: 无 轮廓 ， 为 默认 值 。 

| dotted: 点 状 轮廓 。 

| dashed: 虚线 轮廓 。 

| solid: 实 线 轮 廓 。 

| double: 双 线 轮廓 。 两 条 单线 与 其 间隔 的 和 等 于 指定 outline-width 值 。 
| groove: 3D 凹 槽 轮廓 。 

ridge: 3D 凸 模 轮 廓 。 

inset: 3D 凹 边 轮廓 。 

outset: 3D 凸 边 轮廓 。 

3. 设置 颜色 

outline-color 属性 可 以 设置 轮廓 线 的 颜色 。 基 本 语法 如 下 所 示 : 
outline-color:<color> | invert 


取 值 简单 说 明 如 下 : 
<color>: 指定 颜色 。 
invert: 使 用 背景 色 的 反 色 。 该 参数 值 目前 仅 在 正 及 Opera 浏览 器 下 有 效 。 


因 因 办 办 办 办 办 多国 
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4. 设置 偏 移 
outline-offset 属性 可 以 设置 轮廓 线 的 偏 移 位 置 。 基 本 语法 如 下 所 示 : 
‘outline-offset:<length> 


用 长 度 值 来 定义 轮廓 偏 移 ， 允 许 负 值 ， 默 认 值 为 0。 | 
【示例 1】 在 22.2.1 节 示 例 基础 上 ， 通 过 outline-offset 属性 放大 轮廓 线 ， 使 其 看 起 来 更 大 方 ， 演 
示 效 果 如 图 22.5 所 示 。 下 面 代码 仅 显示 局 部 CSS 样式 ， 完 整 示例 样式 和 结构 请 参考 上 节 示 例 代 码 。 | 





必 设 计 表 单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 所 
input:focus, button:focus { outline: thick solid #b7ddf2 } 
input:active, button:active 《outline: thick solid #aaa } 
让 通过 outlineoffset 属性 放大 轮廓 线 */ 
input:active, button:active { outline-offset: 4px:; } 
input:focus, button:focus { outline-offset: 4px: } 
</style> 
<div id="stylized" class="myfonm"> 

<form id="form1" name="forml" method="post" action=""> 

<hl> 登 录 </hl> 


[localhosympsne teathe x 
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至 录 
人 


| 


Email 
由 了 入 


Password 
型 





(a) 激活 状态 (b) 获取 焦点 状态 
图 22.5 ”放大 激活 和 焦点 提示 框 


【示例 2】 下 面 示例 为 段落 文本 中 部 分 文字 定义 轮 廊 线 ， 演 示 效 果 如 图 22.6 所 示 。 











22.6 ”轮廓 边框 效果 


<style type="text/css"> 
.outline { outline: red solid 2px:} 
</style> 
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| <p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ， <span class="outline">Internet Explorer 8 〈 以 及 更 高 版 本 ) 
<span> 才 支持 outine 属性 。<jp> 
| 


223 边框 样式 


边框 是 CSS 盒 模 型 重要 组 成 部 分 , 本 节 将 介绍 CSS3 增强 的 边框 样式 , 包括 图 像 边 框 和 圆 角 边框 。 

权威 参考 : http://www.w3.org/TR/css3-border/。 
22.3.1 定义 边框 图 像 源 

CSS3 新 增 的 border-image 属性 能 够 模拟 background-image 属性 功能 ， 且 功能 更 加 强大 ， 该 属性 
的 基本 语法 如 下 所 示 : 

border-image:< border-image-source > || < border-image-slice > [ /< border-image-width > | / < border-image- 
Width >? / <' border-image-outset > ]? || <' border-image-repeat > 

取 值 说 明 如 下 : 
<' border-image-source >: 设置 对 象 的 边框 是 否 用 图 像 定义 样式 或 图 像 来 源 路 径 。 
<' border-image-slice >: 设置 边框 图 像 的 分 割 方式 。 
<'border-image-width >: 设置 对 象 的 边框 图 像 宽 度 。 
<' border-image-outset '>: 设置 对 象 的 边框 图 像 的 扩展 。 
<' border-image-repeat >: 设置 对 象 的 边框 图 像 的 平 铺 方式 。 

【 示例】 下面 示例 为 元 素 div 定义 边框 图 像 ， 使 用 border-image-source 导入 外 部 图 像 源 

images/borderl.png， 根 据 border-image-slice 属性 ， 值 为 (27 27 27 27)， 把 图 像 切 分 为 9 块 ， 然 后 分 别 
把 这 九 块 图 像 切片 按 顺序 填充 到 边框 四 边 、 四 和 角 和 内 容 区 域 。 示 例 主 要 代码 如 下 : 


<style type= "text/css"> 
div { 





回回 回回 加 


border:solid 27px: 

让 设置 边框 图 像 */ 

border-image: url(images/borderl .png) 27: 
</style> 
<div></div> 


| 
| 页 面 浏览 效果 如 图 22.7 所 示 。 
| 
| 
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22.7 定义 边框 背景 样式 
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在 上 面 示例 中 ， 使 用 了 一 个 71pxX71px 大 小 的 图 像 ， 在 这 个 正方 形 的 图 像 中 ， 被 等 分 了 9 个 方 | 
块 , 每 个 方块 的 高 和 宽 都 是 21pxX21px 大 小 。 当 声明 border-image-slice 属性 值 为 27 27 2727) 时 , 则 | 
按 下 面 说 明 进 行 解析 : 
第 一 个 参数 值 表示 从 上 向 下 载 切 图 像 ， 显 示 在 顶 边 。 
第 二 个 参数 值 表示 从 右 向 左 裁 切 图 像 ， 显 示 在 右边 。 
第 三 个 参数 值 表示 从 下 向 上 裁 切 图 像 ， 显 示 在 底 边 。 
回 ”第 四 个 参数 值 表 示 从 左 向 右 裁 切 图 像 ， 显 示 在 左边 。 | 
图 像 被 四 个 参数 值 裁 切 为 9 块 ， 再 根据 边框 的 大 小 进行 自 适 应 显示 。 例 如 ， 当 分 别 设置 边框 为 不 | 
同 大 小 ， 则 显示 效果 除了 粗细 之 外 ， 其 他 则 都 是 完全 相同 的 。 | 
22.3.2 ”定义 边框 图 像 平 铺 方 式 
border-image-repeat 属性 设置 对 象 的 边框 图 像 的 平 铺 方 式 。 该 属性 的 基本 语法 如 下 所 示 : 
border-image-repeat:[ stretch | repeat | round | space ]{1.2} 
取 值 简单 说 明 如 下 。 
stretch: 用 拉 伸 方式 来 填充 边框 图 像 ， 为 默认 值 。 
repeat: 用 平 铺 方式 来 填充 边框 图 像 。 当 图 片 碰 到 边界 时 ， 如 果 超 过 则 被 截断 。 
round: 用 平 铺 方式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 的 大 小 直至 正好 
可 以 铺 满 整个 边框 。 
space: 用 平 铺 方式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 之 间 的 距离 直至 
正好 可 以 铺 满 整 个 边框 。 
【示例 】 下 面 示例 以 22.3.1 节 示 例 为 基础 , 设置 边框 图 像 平 铺 显 示 :“border-image-repeat:round;”， 
演示 效果 如 图 22.8 所 示 。 








加 办 加 
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22.8 ”定义 边框 图 像 平 铺 显示 





<style type="text/css"> 

div{ 
height:160px: 
background:hsla(93.9696.6296.1.00): 
border:solid 27px red: 
族 设 置 边框 图 像 源 */ 
border-image-source: url(images/borderl .pne): 
上 * 设 置 边框 图 像 的 平 铺 方式 */ 
border-image-repeat:round: 
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</style> 


f | EV = 宽度 
| 22 3.3 定义 边 本 图 像 宽度 








border-image-width 属性 设置 对 象 的 边框 图 像 的 宽度 。 该 属性 的 基本 语法 如 下 所 示 : 
border-image-width:[ <length> | <percentage> | <number> | auto ]{1,4} 
取 值 简单 说 明 如 下 。 
回 ”<length>: 用 长 度 值 指定 宽度 。 不 允许 负 值 。 
加 ”<percentage>: 用 百分比 指定 宽度 。 参 照 其 包含 块 进行 计算 ， 不 允许 负 值 。 
<number>: 用 浮 点 数 指定 宽度 。 不 允许 负 值 。 
auto: 如 果 auto 值 被 设置 , 则 <' border-image-width > 采用 与 <' border-image-slice > 相同 的 值 。 
【示例 】 下 面 示例 以 22.3.1 节 示 例 为 基础 , 设置 边框 背景 平 铺 显 示 :“border-image-repeat:round;”， 


， 图 像 宽度 为 500px， 演 示 效果 如 图 22.9 所 示 。 


<style type="text/css"> 

div{ 
height: 160px: 
background:hsla(93.96%6.6296.1.00): 
border:solid 27px red: 
让 设置 边框 图 像 源 */ 
border-image-source: Url(images/borderl.png): 
族 设 置 边框 图 像 的 平 铺 方式 */ 
border-image-repeat:round: 
让 设置 边框 图 像 的 宽度 */ 
border-image-width: 500px:; 


</style> 

<div>border-image-source: url(images/borderl .png):<br> 
border-image-repeat:round:<br> 
border-image-width:500px:</div> 


localhosts000/mysite x 
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图 22.9 定义 边框 图 像 宽度 


| 22.3.4 “定义 边框 图 像 分 割 方式 


border-image-slice 属性 设置 对 象 的 边框 图 像 的 分 割 方式 。 该 属性 的 基本 语法 如 下 所 示 : 
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border-image-slice:[ <number> | <percentage> ]{1.4} && fill? 


取 值 简单 说 明 如 下 。 

加 ”<number>: 用 浮 点 数 指定 宽度 。 不 允许 负 值 。 

<percentage>: 用 百分比 指定 宽度 。 参 照 其 包含 块 区 域 进行 计算 ， 不 允许 负 值 。 

fil: 保留 裁减 后 的 中 间 区 域 ， 其 铺 排 方 式 遵循 <' border-image-repeat > 的 设 定 。 

【示例 】 下 面 示例 以 22.3.1 节 示 例 为 基础 , 设置 边框 背景 平 铺 显示 : “border-image-repeat:round;”， | 
设置 裁 切 值 为 10:“border-image-slice: 10;”， 演 示 效 果 如 图 22.10 所 示 。 | 


<style type="text/css"> 

div{ 
height:160px: 
background:hsla(93,96%,62%,1.00); 
border:solid 27px red; 
族 设 置 边框 图 像 源 */ 
border-image-source: Url(images/borderl.png): 
族 设 置 边框 图 像 的 平 铺 方式 */ 
border-image-repeat:round: 
让 设置 边框 图 像 的 宽度 */ 
border-image-width: 500px: 
让 设置 边框 图 像 的 裁 切 值 为 10*/ 
border-image-slice: 10: 

} 

</style> 

<div>border-image-source: url(images/borderl .png):<br> 
border-image-repeat:round:<br> 
border-image-slice: 10:</div> 
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der-imege—source: url (inages/borderl. png); 


er-image-repeat:Tound 
berder-inage-width:500pg; 
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22.10 ”定义 边框 图 像 裁 切 值 
22.3.5 ”定义 边框 图 像 扩展 


border-image-outset 属性 设置 对 象 的 边框 图 像 的 扩展 。 该 属性 的 基本 语法 如 下 所 示 : 
border-image-outset:[ <length> | <number> ]{1.4} 

取 值 简单 说 明 如 下 。 

<length>: 用 长 度 值 指定 宽度 。 不 允许 负 值 。 

<number>: 用 浮 点 数 指定 宽度 。 不 允许 负 值 。 











| 
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【示例 】 下 面 以 22.3.1 节 示 例 为 基础 ， 设 置 边框 背景 向 外 扩展 50px， 演 示 效 果 如 图 22.11 所 示 。 
<style type="text/css"> 
div{ 
内 | height:160px; 
贪 由 | ght:160px: 


margin:60px: 
background:hsla(93.9696.6296.1.00): 
border:solid 27px red: 
| 设置 边框 图 像 源 */ 
| border-image-source: Url(images/borderl.png): 
人 # 设 置 边框 图 像 的 平 铺 方式 所 
border-image-repeat:round: 
人 # 设 置 边框 图 像 的 宽度 所 
border-image-width: 500px: 
必 设 置 边框 图 像 的 裁 切 值 为 10*/ 
border-image-slice: 10: 
人 # 设 置 边框 图 像 向 外 扩展 50 像素 */ 
border-image-outset: SOpx; 
} 
</style> 
<div>border-image-source: url(images/borderl.png):<br> 
border-image-repeat:round;<br> 
border-image-slice: 10:<br> 
border-image-outset: SOpx:</div> 


DY localhosts000/mysite x 
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图 22.11 定义 边框 图 像 向 外 扩展 
22.3.6 ”案例 : 应 用 边框 图 像 


结合 示例 介绍 border-image 在 页 面 中 的 应 用 。 
【示例 1】 下 面 示例 演示 如 何 设计 左下 和 右 下 贺 角 显示 ， 演 示 效果 如 图 22.12 所 示 。 
<style type="text/css"> 
div{ 
height: 120px: 
text-align:center: 
border-style:solid: 
border-width: 10px: 
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border-image: url(images/r2.png) 20: 

} 

</style> 

<div>border-image: url(images/r2.png) 20; 图 像 源 效果 如 下 所 示 : <br> 
<img src="images/r2.png" /></div> 


【示例 2】 设计 完全 圆 角 边框 效果 。 设 计 圆 角 图 像 大 小 为 42pxx42px， 裁 切 半径 为 20px， 显 示 效 | 
果 如 图 22.13 所 示 。 








<style type="text/css"> | 
height: 120px: | 
text-align:center: | 
border-style:solid: | 
border-width: 10px: | 
border-image: url(images/r3.png) 20: | 

} 

</style> | 

<div>border-image: url(images/r3.png) 20: 图 像 源 效果 如 下 所 示 : <br> | 
<img src="images/r3.png" /></div> 


D localhosa000/myite x 2 
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图 22.12 定义 边框 局 部 圆 角 样 式 图 22.13 定义 完全 圆 角 边框 样式 
【示例 3】 设计 阴影 特效 。 设 计 边框 图 像 大 小 为 42pxx42px， 显 示 效 果 如 图 22.14 所 示 。 


border-width:2px Spx 6px 2px: 

border-image: url(images/r4.png) 2562: 
} | 
</style> | 





<img src="images/2.jpg" /> | 
【示例 4】 设 计 选项 卡 。 设计 边框 图 像 大 小 为 12pxx27px， 圆 角 半 径 为 12px， 显 示 效 果 如 图 22.15 | 
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Eo 
width:100px: height:20px: 
border-style:solid: 
cursor:pointer: 
2 float:-left: 
|| padding:4px 0; 


na 
border-image: Url(images/rS.png) 5 5 0: 


</style> 
<u> 
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22.14 ”定义 边框 阴影 样式 22.15 ”定义 选项 卡 样式 
22.3.7 ”定义 圆 角 边框 
视频 讲解 | CSS3 新 增 border-radius 属性 , 使 用 它 可 以 设计 元 素 的 边框 以 圆 角 样 式 显示 。border-radius 属性 的 


| 基本 语法 如 下 所 示 : 

border-radius:[ <length> | <percentage> ]{1.4} [/ [ <length> | <percentage> ]{1.4} ]? 
取 值 简单 说 明 如 下 : 

| 。 回 <length>: 用 长 度 值 设置 对 象 的 圆 角 半径 长 度 。 不 允许 负 值 。 

| <percentage>: 用 百分比 设置 对 象 的 圆 角 半径 长 度 。 不 允许 负 值 。 

| 为 了 方便 定义 四 个 顶 角 的 圆 角 ，border-radius 属性 派生 了 4 个 子 属 性 。 

border-top-right-radius: 定义 右上 角 的 圆 角 。 

border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

border-top-left-radius: 定义 左上 角 的 圆 角 。 
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深 提示 ，borderradius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表示 园 角 的 水 平 半径 ， 第 二 个 值 表示 国 角 | 
的 又 直 半 径 , 两 个 参数 值 通过 针线 分 隔 。 如 果 仅 包含 一 个 参数 值 , 则 第 二 个 值 与 第 一 个 值 | 
相同 ， 它 表示 这 个 角 就 是 一 个 四 分 之 一 圆 角 。 如 果 参 数值 中 包含 0， 则 这 个 角 就 是 矩形 ， 
不 会 显示 为 圆 角 。 


针对 borderradius 属性 参数 值 ， 各 种 浏览 器 的 处 理 方式 并 不 一 致 。 在 Chrome 和 Safari 浏览 器 中 ， | 
会 绘制 出 一 个 椭圆 形 边 框 ， 第 一 个 半径 为 椭圆 的 水 平方 向 半径 ， 第 二 个 半径 为 椭圆 的 垂直 方向 半径 .| 
在 Firefox 和 Opera 浏览 器 中 ， 将 第 一 个 半径 作为 边框 左上 角 与 右 下 角 的 圆 半径 来 绘制 ， 将 第 二 个 半 | 
径 作为 边框 右上 角 与 左下 角 的 圆 半径 来 绘制 。 
【示例 1】 下 面 给 border-radius 属性 设置 一 个 值 :“border-radius:10px; ”， 演 示 效 果 如 图 22.16 所 示 。 | 
<style type="text/css"> 
img { 
height:300px: 
border: 1px solid red: 
border-radius: 10px: 

















} 
</style> 
<img src="images/1.jpe" /> 


如 果 为 border-radius 属性 设置 两 个 参数 ， 则 效果 如 图 22.17 所 示 。 


img { 
height:300px: 
border: 1px solid red: 
border-radius:20px/40px; 
} 





图 22.16 定义 圆 角 样式 1 图 22.17 定义 圆 角 样式 2 

也 可 以 为 元 素 的 四 个 项 角 定 义 不 同 的 值 ， 实 现 的 方法 有 两 种 : 

一 种 方法 是 利用 border-radius 属性 ， 为 其 赋 一 组 值 。 当 为 border-radius 属性 赋 一 组 值 ， 将 遵循 
CSS 赋值 规则 ， 可 以 包含 2 个 、3 个 或 者 4 个 值 集合 。 但 是 此 时 无 法 使 用 斜 杠 方式 定义 圆 角 水 平和 垂 
直 半 径 。 

如 果 是 四 个 值 ， 则 这 四 个 值 将 按照 top-left、top-right、bottom-right、bottom-left 顺序 来 设置 。 

如 果 bottom-left 值 省 略 ， 那 么 它 等 于 top-right。 

如 果 bottom-right 值 省 略 ， 那 么 它 等 于 top-left。 

如 果 top-right 值 省 略 ， 那 么 它 等 于 top-left。 
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| 如 果 为 border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 值 表示 每 个 角 的 圆 角 半径 。 
| 【示例 2】 下 面 示例 为 图 像 的 四 个 项 角 定 义 不 同 圆 角 半径 ， 演 示 效 果 如 图 22.18 所 示 。 
| 











| img { 
全 7 | height300px: 
Nm border1px solid red: 


| border-radius:10px 30px 50px 70px: 
| 


如 果 为 border-radius 属性 设置 3 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 的 圆 角 半径 ,第 二 个 值 
| 表示 右上 和 左下 两 个 角 的 圆 角 半径 ， 第 三 个 值 表 示 右 下 角 的 圆 角 半径 。 

| 如 果 为 border-radius 属性 设置 2 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 和 右 下 角 的 圆 角 半径 ， 
| 第 二 个 值 表示 右上 和 左下 两 个 角 的 圆 角 半 径 。 

| 另 一 种 方法 是 利用 派生 子 属性 进行 定义 ， 如 border-top-right-radius、border-bottom-right-radius、 


























| border-bottom-left-radius、border-top-left-radius。 
| < 注意 : Gecko 和 Presto 引擎 在 写法 上 存在 很 大 差异 。 
【示例 3】 下 面 代码 定义 div 元 素 右上 角 为 50 像素 的 圆 角 ， 演 示 效 果 如 图 22.19 所 示 。 


img { 
height:300px: 
border: 1px solid red: 
-moz-border-radius-topright:SOpx: 
-webkit-border-top-right-radius:50px: 
border-top-right-radius:S0px: 









图 22.18 ”分别 定 义 不 同 项 角 的 圆 角 样式 图 22.19 定义 某 个 顶 角 的 圆 角 样式 


22.3.8 ”案例 : 设计 椭圆 图 形 





视频 讲解 | 使 用 border-radius 属性 设计 圆 角 时 ， 可 能 会 存在 下 面 几 种 情况 : 
| 如 果 受 影响 的 角 的 两 个 相 邻 边 宽度 不 同 ， 那 么 这 个 圆 角 将 会 从 宽 的 一 边 圆滑 过 渡 到 罕 的 一 
| 边 ， 即 偏向 宽 边 的 圆 弧 略 大 ， 而 偏向 窗 边 的 圆 弧 略 小 。 
| 如 果 两 条 边 宽度 相同 ， 那 么 圆 角 两 个 相 邻 边 呈 对 称 圆 弧 显示 ， 即 相交 45° 的 对 称 线 上 。 
| 如 果 一 条 边 宽度 是 相 邻 另 一 条 边 宽度 的 两 倍 , 那么 两 边 圆 弧 线 交 于 靠近 窄 边 的 30° 角 线 上 。 
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border-radius 不 允许 圆 角 彼此 重合 ， 当 相 邻 两 个 圆 角 的 半径 之 和 大 于 元 素 的 宽 或 高 时 ， 在 浏览 器 | 
中 会 呈现 为 椭圆 或 正 圆 效果 。 | 
【示例 】 下 面 代码 定义 img 元 素 显示 为 圆 形 ， 当 图 像 宽 高 比 不 同时 ， 显 示 效 果 不 同 ， 如 图 22.20 | 
所 示 。 | 
<style type="text/css"> 
img {/* 定 义 图 像 圆 角 边框 */ 
border: solid 1px red: | 
border-radius: 5096: /* 圆 角 */ | 

















1 

I1 {/* 定 义 第 1 幅 图 像 宽 高 比 为 1 : 1*/ 
width:300px: 
height:300px: 


} 

.2 {/* 定 义 第 2 幅 图 像 宽 高 比 不 为 1 : 1*/ 
width:300px; 
height:200px: 


由 
3 {/* 定 义 第 3 幅 图 像 宽 高 比 不 为 1 : 1*/ 
‘width:300px; 
height: 100px: 
border-radius: 20px: /* 定 义 圆 角 */ 
四 
</style> 
<img class="rl" src="images/1.jpg" title=" 圆 角 图 像 " /> 
<img class="r2" src="images/1.jpe" title=" 椭 圆 图 像 " /> 
<img class="r3" src="images/1.jpg" title=" 圆 形 图 像 " /> 








22.20 ”定义 圆 形 显示 的 元 素 效果 


22.4 盒子 阴影 


CSS3 的 box-shadow 类 似 于 text-shadow， 不 过 text-shadow 负责 为 文本 设置 
阴影 ， 而 box-shadow 负责 给 对 象 定义 图 层 阴 影 效果 。 
权威 参考 : http://www.w3.org/TR/css3-border/。 
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22 .4.1 ”定义 盒子 阴影 


box-shadow 属性 可 以 定义 元 素 的 阴影 ， 基 本 语法 如 下 所 示 : 
box-shadow : none | inset? &é& <length> {2.4} && <color>? 

取 值 简单 说 明 如 下 : 

none: 无 阴影 。 

inset: 设置 对 象 的 阴影 类 型 为 内 阴影 。 该 值 为 空 时 ， 对 象 的 阴影 类 型 为 外 阴影 。 
<length>GD: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 
<length>@: 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 。 可 以 为 负 值 。 
<length>G@): 如 果 提供 了 第 3 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 模糊 值 。 不 允许 负 值 。 
<length>@: 如 果 提供 了 第 4 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 外 延 值 。 可 以 为 负 值 。 
<color>: 设置 对 象 的 阴影 的 颜色 。 

下 面 结合 案例 进行 演示 说 明 。 

【示例 1】 下 面 示例 定义 一 个 简单 的 实 影 投 影 效 果 ， 演 示 效 果 如 图 22.21 所 示 。 


回回 回回 加 加 加 


【示例 2】 定 义 位 移 、 阴 影 大 小 和 阴影 颜色 ， 则 演示 效果 如 图 22.22 所 示 。 
img{ 
height:300px; 
box-shadow:2px 2px 10px #06C:; 


Bl) Shocabe. -sc| ies x < 3 [CHET 





22.21 定义 简单 的 阴影 效果 图 22.22 定义 复杂 的 阴影 效果 
【示例 3】 定义 内 阴影 阴影 大 小 为 10px， 颜 色 为 #06C， 则 演示 效果 如 图 22.23 所 示 。 
<style type="text/css"> 


pre{ 
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padding: 26px: 

font-size:24px; 

box-shadow: inset 2px 2px 10px #06C: 
} 
</style> 
<pre> 
-moz-box-shadow: inset 2px 2px 10px #06C: 
-webkit-box-shadow: inset 2px 2px 10px #06C: 
box-shadow: inset 2px 2px 10px #06C: 
</pre> 








-moz-box-shadow: inset 2px 2px 10px #06C; 


-webkit-box-shadow: inset 2px 2px 10px #06C; 
box-shadow: inset 2px 2px 10px #06C; 





图 22.23 ”定义 内 阴影 效果 
【示例 4】 通 过 设置 多 组 参数 值 定义 多 色 阴 影 ， 演 示 效 果 如 图 22.24 所 示 。 
img { 
height: 300px: 
box-shadow: -10px 0 12px red, 
10px 0 12px blue. 
0 -10px 12px yellow, 
0 10px 12px green: 
出 


【示例 5】 通 过 多 组 参数 值 还 可 以 定义 渐变 阴影 演示 效果 如 图 22.25 所 示 。 
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图 22.24 定义 多 色 阴影 效果 图 22.25 定义 渐变 阴影 效果 
< 全 注意 ， 当 给 同一 个 元 素 设计 多 个 阴影 时 ， 最 先 写 的 阴影 将 显示 在 最 顶层 。 


| 

| 
height:300px: l 
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box-shadow:0 0 10px red. 
2px 2px 10px 10px yellow. 
4px 4px 12px 12px green: 
F } 
全 | 
vote | 22.4.2 ”案例 : box-shadow 的 应 用 
本 节 通 过 一 个 简单 的 示例 进一步 练习 box-shadow 的 应 用 。 
【操作 步骤 】 
第 1 步 ， 设 计 一 个 简单 的 盒子 ， 并 定义 基本 形状 。 
视频 讲解 <style type="text/css"> 
box{ 
width:100px: height:100px: 人 # 固 定 大 小 六 
text-align:center: line-height100px: /+ 显示 在 中 央 */ 
background-color:rgba(255,204.0,.5); 让 浅 色 背 景 +/ 
border-radius:10px: /# 适 当 圆 角 所 
padding:10px: margin:10px: 让 添加 间距 */ 
} 
</style> 


<div class="box bs1">box-shadow</div> 


第 2 步 ， 阴影 就 是 对 原 对 象 的 复制 ,包括 内 边 距 和 边框 都 属于 box 的 占 位 范围 ,阴影 也 包括 对 内 
边 距 和 边框 的 复制 ， 但 是 阴影 本 身 不 占据 布局 的 空间 。 比 较 效果 如 图 22.26 所 示 。 


.bsl {box-shadow:120px Opx #ccc:} 
第 3 步 ， 四 周 有 一 样 模糊 值 的 阴影 ， 如 图 22.27 所 示 。 
.bsl{ box-shadow:0 0 20px #666:} 


x 
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图 22.26 ”比较 对 象 和 阴影 大 小 22.27 四 周 同时 显示 阴影 
第 4 步 ， 定 义 5px 扩展 阴影 ， 如 图 22.28 所 示 。 
.bsl1{ box-shadow:0 0 0 Spx #333:} 


| 阴影 不 像 border 要 占据 布局 的 空间 , 因此 要 实现 对 象 鼠标 经 过 产生 外 围 的 边框 ， 可 以 使 用 阴影 的 
| 扩展 来 代 蔡 border。 或 者 使 用 border 的 transparent 实现 ， 不 过 不 如 box-shadow 的 spread 扩展 方便 。 

| 如 果 使 用 border， 布 局 会 产生 影响 。 

第 5 步 ， 拓 展 为 负 值 的 阴影 ， 如 图 22.29 所 示 。 


bsl{ 
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box-shadow: 0 15px 10px -15px #333; 
border: none: 


x 


x 
< 司 Bal © SB hs/ocatto.. - ao|| 





图 22.28 定义 扩展 阴影 22.29 ”定义 负 值 阴影 
< 人 注意 : 要 产生 图 22.29 的 效果 ，y 轴 的 值 和 spread 的 值 刚 好 相反 。 其 他 边 设 计 同 理 。 


第 6 步 ， 定 义 内 阴影 ， 如 图 22.30 所 示 。 


bsl{ 
background-color: #1C8426: 
box-shadow: Opx Opx 20px #fff inset: 
} 


< 拟 注意 : 可 以 直接 为 div 这 样 的 金子 设置 box-shadow 念 阴影 ,但 是 不 能 直接 为 img 图 片 设置 爹 阴影 。 

/* 直接 在 图 片上 添加 内 阴影 ， 无 效 */ 

.img-shadow img { 

box-shadow: inset 0 0 20px red: 
} 
可 以 通过 为 img 的 容器 div 设置 内 阴影 ， 然 后 让 img 的 z-index 为 -1 解决 这 个 问题 。 但 是 这 种 做 

法 不 可 以 为 容器 设置 背景 色 ， 因 为 容器 的 级 别 比 图 片 高 ， 设 置 了 背景 色 会 挡住 图 片 ， 效 果 如 图 22.31 
所 示 。 
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图 22.30 定义 内 阴影 图 22.31 为 图 片 定义 内 阴影 
雍 在 图 片 容器 上 添加 内 阴影 ， 生 效 */ 
box-shadow { 
box-shadow: inset 0 0 20px red: 
display:inline-block: 
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} 

.box-shadow img { 
Pposition: relative; 
z-index: -1; 

} 


第 7 步 ， 还 有 一 个 更 好 的 方法 ， 不 用 考虑 图 片 的 层级 ， 利 用 “:before” 伪 元 素 可 以 实现 ， 而 且 还 
可 以 为 父 容器 添加 背景 色 等 。 
/给 图 片 容器 上 添加 伪 元 素 或 伪 类 ， 不 用 为 img 设置 负 值 的 z-index 值 了 。 有 内 阴影 */ 
img{ 
position: relative; 
background-color 证 C3: 
padding: Spx: 
} 
img:before { 
content: "; 
position: absolute; 
top: 0; right: 0; bottom: 0; left: 0: 
box-shadow: inset 0 0 40px #f00: 
} 


第 8 步 ， 定 义 多 个 阴影 ， 如 图 22.32 所 示 。 


.bsl { 
box-shadow: 40px 40px Tgba(26.202.221.0.5). 
80px 80px Tgba(236.43.120..5): 
border-radius: 0: 


< 刁 Blocalho 





图 22.32 定义 多 个 阴影 


你 提示 : 阴影 也 是 有 层 王 关系 的 ， 前 面 的 阴影 层级 高 ， 会 压 住 后 面 的 阴影 。 阴影 和 阴影 之 间 的 透明 
度 可 见 ， 而 主体 对 象 的 透明 度 对 阴影 不 起 作用 。 


22.4.3 ”案例 : 设计 条 边 阴 影 


本 例 使 用 box-shadow 设计 攻 边 阴影 ， 翘 边 效果 就 是 四 角 旁 边 普 起 阴影 ， 如 图 22.33 所 示 。 
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图 22.33 ”设计 臣 边 阴影 效果 汪 创 东 枯 








content "": 
position: absolute: 
width: 90%:height: 80%: 


| 
| 
| 
示例 主要 代码 如 下 : | 
<style type="text/css"> | 
* { margin: 0; padding: 0:} 必 清 除 页 边 距 */ | 
ul {list-style: none: } /清除 项 目 列表 符号 所 | 
box { /设计 盒子 样式 #/ | 
‘width: 980px: height: auto: /#* 固 定 大 小 ， 高 度 自动 调整 3/ | 
clear: both: | 
overflow: hidden: 禁止 超出 显示 */ | 
margin: 20px auto; 证 居中 显示 */ 
} 
boxli { * 设 计 每 个 图 片 外 框 样式 */ | 
background: #fFF: 让 白 色 背 景 */ | 
float: left: 让 浮动 并 列 显示 */ 
position: Telative: 必定 义 定位 包含 框 所 
margin: 20px 10px; 族 调 整 项 目 间距 */ 
border: 2px solid #efefef: 证 增加 浅 色 边 框 */ 
让 添加 内 阴影 */ 
box-shadow: 0 1px 4px rgba(0.0.0.0.27). 0 0 4px rgba(0.0.0.0.1) inset: 
} 
.box liimg { 证 固 定 图 片 大 小 ， 增 加 外 边 距 */ | 
width: 290px; height: 200px: | 
margin: SPX: | 
boxlibeforef /在 左 侧 添加 才 起 阴影 | 
content: ™; 让 空 内 容 */ | 
position: absolute: 上 # 固 定 定位 #/ | 
width: 9096: height 8096: 让 定义 大 小 */ | 
bottom: 13px: left: 21px: 刻 定 位 */ | 
background: transparent: /# 透 明 背 景 拟 | 
Z-index: -2: 片 显示 在 照片 下 面 */ | 
box-shadow: 0 8px 20px rgba(0.0.0.0.8); /* 添 加 阴影 */ ! 
transform: skew(-12deg) rotate(-6deg): /+ 变形 并 旋转 阴影 ， 让 其 短 起 */ | 
} | 
‘box lizafter { /# 在 右 侧 添加 翘 起 阴影 ， 方 法 同上 所 | 
| 
| 
| 
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So 
bottom: 13px: right: 21px: 
z-index: -2: 
backeground: transparent: box-shadow: 0 8px 20px rgba(0.0.0.0.8): 
transform: skew(12deg) rotate(6dee): 
} 
</style> 
<ul class="box"> 
<li><img src= "images/1.jpg" ></li> 
| <li><img src="images/2.jpe" /></li> 
<li><img strc="images/3.jpe" ></li> 
<n> 
本 例 主要 使 用 CSS3 的 伪 类 “:before” 和 “:after”， 分 别 在 被 插 盒子 里 面 的 内 容 前 面 和 内 容 后 面 
动态 插入 空 内容 。 设 置 盒子 时 ， 每 个 大 盒子 小 盒子 的 值 的 大 小 都 要 算 清 楚 ， 不 要 超过 大 盒子 范围 ， 而 
且 也 不 要 浪费 。 使 用 z-index 属性 设置 元 素 的 堆 闪 顺序 。 拥 有 更 高 堆 共 顺序 的 元 素 总 是 会 处 于 堆 关 顺 
序 较 低 的 元 素 的 前 面 ， 它 仅 能 上 奏效 。 
skew0 函 数 能 够 让 元 素 倾斜 显示 ， 它 可 以 将 一 个 对 象 以 其 中 心 位 置 围绕 着 X 轴 和 Y 轴 按 照 一 定 
的 角度 倾斜 。rotate0 函 数 只 是 旋转 ， 而 不 会 改变 元 素 的 形状 。skew0O 函 数 不 会 旋转 ， 而 只 会 改变 元 素 
的 形状 。 相 关 知 识 将 在 后 面 章节 介绍 。 























22.5 案例 实战 


| 本 节 将 通过 两 个 案例 练习 CSS 盒 模型 相关 组 成 要 素 的 具体 应 用 。 
22.5.1 设计 内 容 页 


本 例 将 应 用 box-shadow、text-shadow 和 border-radius 等 属性 ， 定 义 一 个 包含 阴影 、 圆 角 特 效 ， 同 
| 时 利用 CSS 渐变 、 半 透明 特效 设计 的 精致 栏目 效果 ， 预 览 效果 如 图 22.34 所 示 。 



































图 22.34 设计 正文 内 容 页 








具体 操作 步骤 请 扫 码 学 习 。 
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22.5.2 ”设计 应 用 界面 


本 例 利用 CSS3 新 增 的 边框 和 背景 样式 来 模拟 桌面 界面 效果 。 主 要 应 用 了 box-shadow、 
border-radius、text-shadow、border-color、border-image 等 属性 ， 同 时 还 用 到 了 渐变 设计 属性 。 整 个 案 
例 的 演示 效果 如 图 22.35 所 示 。 


loca hosmysiteast! 
@ DlocalhosUn 








图 22.35 设计 Windows 7 界面 效果 
有 具体 操作 步骤 请 扫 码 学 习 。 


22.6 在 线 练 司 





本 节 提 供 了 多 个 在 线 练习 : 〈1) 布局 技巧 ; (2) 排版 方法 ， (3) CSS3 新 特性 。 读 者 可 通过 这 些 | 
专题 练习 CSS3 的 布局 方法 、 特 性 和 应 用 技巧 。 
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CSS3 伸缩 盒 布 局 


2009 年 ，W3C 提出 一 种 半 新 的 布局 方案 一 一 伸缩 鲍 布 局 ， 它 可 以 简便 、 完 整 、 响 应 式 
地 实现 各 种 页 面 布局 ， 自 由 设置 多 个 栏目 在 一 个 容器 中 的 分 布 方 式 , 以 及 如 何 处 理 容器 内 可 
用 的 宝 间 。 使 用 该 模型 可 以 轻松 创建 自 适应 窗口 的 流动 布局 ， 或 者 自 适 应 字体 大 小 的 弹性 布 
局 。W3C 的 伸缩 盒 布 局 分 为 四 版 本 、 新 版 本 ， 以 及 混合 过 渡 版 本 三 种 不 同 的 编码 方式 。 共 
中 混 含 过 渡 版 本 主要 针对 JE 10 做 了 兼容 。 目 前 ， 该 技术 多 应 用 在 移动 端 网 页 布局 ， 本 章 将 
主要 讲解 加 版 本 和 新 版 本 伸缩 金 布局 的 基本 用 法 。 

权威 参 者 : http://www.w3.org/TR/css-flexbox-1/ 

国光 3 回 





【学 习 重 点 】 

吕 设计 多 列 布局 。 

MI 设计 上 四 版 伸缩 爹 布局 。 
MH 设计 新 版 伸缩 爹 布 局 。 
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23.1 多 列 布 局 


CSS3 新 增 columns 属性 ， 用 来 设计 多 列 布局 ， 它 允许 网 页 内 容 跨 栏 显示 ， 适 合 设计 正文 版 式 。 
权威 参考 : http://www.w3.org/TR/css3-multicol/。 


23.1.1 设置 列 宽 


column-width 属性 可 以 定义 单列 显示 的 宽度 ， 基 本 语法 如 下 所 示 : 
column-width:<length> | auto 


取 值 简单 说 明 如 下 : 

<length>: 用 长 度 值 来 定义 列 宽 。 不 允许 负 值 。 

回 auto: 根据 <'column-count> 自 定 分 配 宽度 ， 为 默认 值 。 | 

【示例 】 下 面 示例 演示 column-width 属性 在 多 列 布局 中 的 应 用 。 设 计 body 元 素 的 列 宽度 为 300 | 
像素 ， 如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 窗 口 足够 宽 ， 且 内 容 很 多 ， 则 会 在 多 
列 中 进行 显示 ， 演 示 效 果 如 图 23.1 所 示 ， 根 据 窗 口 宽 度 自动 调整 为 两 栏 显示 ， 列 宽度 显示 为 300 
像素 。 














23.1 固定 列表 宽度 显示 | 


‘<style type="text/css"> 

必定 义 网 页 列 宽 为 300 像素 ， 则 网 页 中 每 个 栏目 的 最 大 宽度 为 300 像素 */ 

body {column-width:300px:} 

hl {color: #333333: padding: Spx 8px:font-size: 20px:text-align: center: padding: 12px:} 

h2 {font-size: 16px: text-align: center:} 

Pp {color: #333333: font-size: 14px: line-height: 180%: text-indent: 2em:} 

</style> 

<hl>W3C 标准 </h1> 

<p>W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 <strong> 开 放 的 Web 平 台 (Open Web Platform) 
</strong>。 尽 管 这 个 开放 Web 平台 的 边界 在 不 断 延伸 ， 产 业界 认为 HIMLS 将 是 这 个 平台 的 核心 ， 平 台 的 能 力 
将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 系列 Web 技术 ， 包 括 CSS. SVG WOFE 语义 Web， 及 XML 和 各 类 | 
应 用 编程 接口 (APIs)。</p> | 

<p> 截 至 2014 年 3 月 ，W3C 共 设 立 5 个 技术 领域 ， 开 展 23 个 标准 计划 。W3C 设 有 46 个 工作 组 (Working | 
Group)、14 个 兴趣 小 组 (Interest Group)、3 个 协调 组 (Coordination Group)、169 个 社区 组 (Community Group) ， 
以 及 3 个 业务 组 (Business Group )。</p> 
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| <p> 目 前 ，W3C 正在 探讨 技术 专家 及 个 人 参与 W3C 标准 制定 过 程 的 Webizen 计划 ， 敬 请 期 待 。</p> 

| <p>W3C 于 2014 年 11 月 发 布 了 题 为 &ldquo:W3C 工作 重点 (2014 年 11 月 ) "的 报告 ， 这 是 最 新 的 一 份 对 
| W3C 近期 开展 的 工作 要 点 进行 了 综述 的 文章 ， 阐 述 了 近期 的 工作 重点 和 优先 级 。</p> 

| 


开 | 23.12 设置 列 数 


column-count 属性 可 以 定义 显示 的 列 数 ， 基 本 语法 如 下 所 示 : 

column-count<integer | auto 

取 值 简单 说 明 如 下 : 

<integer>: 用 整数 值 来 定义 列 数 。 不 允许 负 值 。 

auto: 根据 <' column-width 人 > 自 定 分 配 宽度 ， 为 默认 值 。 

【示例 】 在 上 面 示例 基础 上 ， 如 果 定 义 网 页 列 数 为 3， 则 不 管 浏览 器 窗口 怎么 调整 ， 页 面 内 容 总 
是 遵循 3 列 布局 ， 演 示 效 果 如 图 23.2 所 示 。 


必定 义 网 页 列 数 为 3， 这 样 整个 页 面 总 是 显示 为 3 列 */ 
body {column-count:3:} 


W3CT2014 年 1 月光 
共 ““W3C 工 作 重点 [2014 年 1 


{Open Web Platform) : 到 和 

etre e: 玉昌 二 ， 这 时 及 新 的 一 价 半 wx 
oup) ，169 个 社区 组 。 工作 要 点 进行 了 

ity Grosp》 ， 以 有 3 个 业务 组 ”天 的 工作 重点 和 优先 级。 





23.2 设计 3 列 显示 
23.1.3 ”设置 间距 


column-gap 属性 可 以 定义 两 栏 之 间 的 间距 ， 基 本 语法 如 下 所 示 : 
column-gap:<length> | normal 


取 值 简单 说 明 如 下 : 
<length>: 用 长 度 值 来 定义 列 与 列 之 间 的 间隙。 不 允许 负 值 。 
normal: 与 <'font-size> 大 小 相同 。 如 假设 该 对 象 的 font-size 为 16px， 则 normal 值 为 16px。 
【示例 】 在 上 面 示例 基础 上 , 通过 column-gap 和 line-height 属性 配合 使 用 ， 把 文档 版 面 设计 得 疏 
朗 大 方 ， 以 方便 阅读 。 其 中 列 间 距 为 3em， 行 高 为 2.5em， 页 面 内 文字 内 容 看 起 来 更 明晰 、 轻 松 ， 演 
示 效 果 如 图 23.3 所 示 。 
body { 
证 定 义 页 面 内 容 显示 为 三 列 */ 
column-count: 3: 
族 定 义 列 间 距 为 3em， 默 认为 lem*/ 
column-gap: 3em: 
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line-height: 2.5em; /* 定义 页 面 文 本 行 高 */ 


Ba ©- repocstostsos0 mae res nm 


W3C 标 准 


W3C 的 各 类 技术 标准 在 努力 
为 各 类 应 用 的 开发 打 咨 一 个 开放 
的 Web 平 台 (Open Web 
Platform 》。 尽 车 
平台 的 边界 在 趟 断 运 候 ， 产 业界 
认为 HTML5 和 将 是 这 个 平台 的 栋 
心 ， 平 全 的 能 力 党 依 顿 于 W3C 及 
其 合作 伙伴 正在 创建 的 一 系列 


截至 2014 年 3 月 ，W3C 闪 设 
立 5 个 技术 领域 ， 开 展 23 个 标准 
升 划 。 W3C 商 有 46 个 工作 组 
《Wodking Grovp) ，14 个 兴趣 小 
组 aterest Group) 、3 个 协调 组 
(Coordination Group) .169 个 
社区 组 (Commonity Greup) ， 





BED ET 


所 前， W3C 正 在 探讨 技术 专 
家 及 个 人 参与 W3C 标 准 制 定 过 程 
的 Webizen 计 划 ， 敏 请 期 竺 > 


W3C 于 2014 年 11 月 发 布 了 是 
为"W3C 工 作 重点 《2014 年 11 
月 ) "的 损 吉 ， 这 是 时 新 的 一 价 
对 W3C 近 期 开展 的 工作 要 点 进行 
了 综述 的 文章 ， 痢 述 了 近期 的 工 








作 重 点 和 优先 级- 





图 23.3 设计 政 朗 的 跨栏 布局 


23.1.4 设置 列 边框 


column-rule 属性 可 以 定义 每 列 之 间 边框 的 宽度 、 样 式 和 颜色 。 基 本 语法 如 下 所 示 : 
column-mle:< column-rule-width > || <' column-mle-style > || < column-rmle-color > 

取 值 简单 说 明 如 下 : 

<' column-rule-width >: 设置 对 象 的 列 与 列 之 间 的 边框 厚度 。 

<' column-rule-style >: 设置 对 象 的 列 与 列 之 间 的 边框 样式 。 

<' column-rule-color >: 设置 对 象 的 列 与 列 之 间 的 边框 颜色 。 
column-rule-style 属性 语法 如 下 所 示 〈 取 值 与 边框 样式 border-style 相同 ): 


column-rule-width 与 border-width，column-rule-color 与 border-color 设置 相同 。 
【示例 】 在 上 面 示例 基础 上 , 为 每 列 之 间 的 边框 定义 一 个 虚线 分 割 线 , 线 宽 为 2 像素 , 灰色 显示 ， 
演示 效果 如 图 23.4 所 示 。 





~ Sc¢|Blocsho 


认为 HTML5 将 是 这 个 平台 的 核 
心 ， 平 台 的 能 力 将 放款 于 W3C 及 
其 合作 伙伴 正在 创建 的 一 系列 


Web 搞 术 ， 包括 CSS. SVG， 
WOFFE ,再 义 Web， 及 XML 和 种 
应 用 尝 程 接口 (APls》 - 


圾 至 2014 征 3 月 ，W3C 闪 没 
立 s 个 技术 领域 ， 开 展 23 个 标准 
ac 次 有 36 个 工作 组 
《wasting Groop)。14 个 兴 相 小 


组 (merest Group) .3 个 协调 组 


{Coordination Group) 、 
区 组 (Community Group 》 ， 





图 23.4 ”设计 列 边框 效果 
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| 以 及 3 个 业务 组 【Business 
| Gmop) 。 


目前 ，W3C 正 在 探讨 技术 专 


| 次 及 个 人 参与 W3C 标 准 制 定 这 程 
|。 的 Wetizeai 间 ， 收 请 期 千 











{ 
让 定义 页 面 内 容 显示 为 三 列 */ 
column-count: 3: 
上 # 定 义 列 间距 为 3tm， 默 认为 lem*/ 
column-gap: 3em:; 

line-height: 2.5em; 

从 定义 列 边 框 为 2 像素 宽 的 灰色 虚线 */ 
column-mle: dashed 2px gray: 





23.1.5 ”设置 跨 列 显示 


column-span 属性 可 以 定义 跨 列 显示 ， 基 本 语法 如 下 所 示 : 
column-span:none | all 


取 值 简单 说 明 如 下 : 

none: 不 跨 列 。 

all: 横 跨 所 有 列 。 

【示例 】 在 上 面 示例 基础 上 ， 使 用 column-span 属性 定义 一 级 标题 跨 列 显示 ， 演 示 效 果 如 图 23.5 
| 所 示 。 


body { 
让 定义 页 面 内 容 显示 为 三 列 */ 
column-count: 3; 
必定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.5em: 
让 定义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-mle: dashed 2px gray;} 
让 设置 一 级 标题 跨越 所 有 列 显示 */ 
| hlf 
color: #333333: font-size: 20px: text-align: center: 
padding: 12px; 
让 跨越 所 有 列 显示 */ 
column-span: all: 


} 
P {color: #333333; font-size: 14px; line-height: 180%: text-indent: 2em:} 








23.5 ”设计 标题 跨 列 显示 效果 
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23.1.6 ”设置 列 高 度 


column-fill 属性 可 以 定义 栏目 的 高 度 是 否 统一 ， 基 本 语法 如 下 所 示 : 
column-fill:auto | balance 
取 值 简单 说 明 如 下 : 
auto: 列 高 度 自 适 应 内 容 。 | 
回 balance: 所 有 列 的 高 度 与 其 中 最 高 的 一 列 统一 。 | 
【示例 】 在 上 面 示例 基础 上 ， 使 用 column-fill 属性 定义 每 列 高 度 一 致 。 | 
body { 
* 定 义 页 面 内 容 显示 为 三 列 */ 
column-count: 3; 
上 # 定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.5em; 
从 定义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-mle: dashed 2px gray: 
族 设 置 各 列 高 度 一 致 */ 
column-fill: balance: 








23.2 ”旧版 伸缩 盒 


Flexbox (伸缩 盒 ) 是 CSS3 新 增 的 布局 模型 ， 实 际 上 它 一 直 都 存在 。 最 开始 它 作 为 Mozilla XUL 
的 一 个 功能 被 用 来 制作 程序 界面 ， 如 Firefox 的 工具 栏 ， 就 多 次 使 用 这 个 属性 。 本 节 将 重点 介绍 旧版 
本 伸缩 盒 模型 的 基本 用 法 。 


23.2.1 启动 伸缩 盒 


在 旧版 本 中 启动 伸缩 盒 模型 ， 只 需 设 置 容器 的 display 的 属性 值 为 box (或 inline-box)， 用 法 如 下 
所 示 : 

display: box: 

display: inline-box: 

伸缩 盒 模型 包括 两 部 分 : 

回 父 容器 。 

回 子 容器 。 

父 容器 通过 “display:box;” 或 者 “display: inline-box:” 启 动 伸缩 盒 布局 功能 。 

子 容 器 通过 box-flex 属性 定义 布局 宽度 ， 定 义 如 何 对 父 容器 的 宽度 进行 分 配 。 

父 容器 又 通过 如 下 属性 定义 包含 容器 的 显示 属性 ， 简 单 说 明 如 下 : 

box-orient: 定义 父 容器 里 子 容器 的 排列 方式 ， 是 水 平 还 是 垂直 。 

回 boxr-direction: 定义 父 容器 里 子 容器 的 排列 顺序 。 

box-align: 定义 子 容器 的 垂直 对 齐 方式 。 

回 box-pack: 定义 子 容器 的 水 平 对 齐 方式 。 
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| 4 注意 使 用 旧版 本 伸缩 使 模型 ， 需 要 用 到 各 浏览 器 的 私有 属性 ，Webkit 引 党 支持 -webkit- 前 级 的 
| 私有 属性 ，Mozilla Gecko 引擎 支持 -moz- 前 缓 的 私有 属性 ，Presto 引擎 (包括 Opera 浏览 
| 器 等 ) 支持 标准 属性 ，IE 暂 不 支持 旧版 本 伸缩 念 模型 。 


医 | 23.2.2 ”设置 宽度 
JVote We Se i 
i | 在 默认 情况 下 ， 盒 子 没有 弹性 ， 它 将 尽 可 能 宽 地 使 其 内 容 可 见 ， 且 没有 浇 出 ， 其 大 小 由 width、 
| height、min-height、min-width、max-width 或 者 max-height 属性 值 来 决定 。 

使 用 box-flex 属性 可 以 把 默认 布局 变 为 盒 布 局 。 如 果 box-flex 的 属性 值 为 1， 则 元 素 变 得 富有 弹 
性 ， 其 大 小 将 按 下 面 的 方式 计算 : 
| 声明 的 大 小 (width、height、min-width、min-height、max-width、max-height) 。 
| 回 ” 父 容器 的 大 小 和 所 有 余下 的 可 利用 的 内 部 空间 。 
| 如 果 盒 子 没 有 声明 大 小 ,那么 其 大 小 将 完全 取决 于 父 容器 的 大 小 ， 即 盒子 的 大 小 等 于 父 容 器 的 大 
| 小 乘 以 其 box-flex 在 所 有 盒子 box-flex 总 和 中 的 百分比 ， 用 公式 表示 : 
| 盒子 的 大 小 = 父 容器 的 大 小 x 盒子 的 box-flex/ 所 有 盒子 的 box-flex 值 的 和 
| 
| 
| 





余下 的 盒子 将 按照 上 面 的 原则 分 享 剩 下 的 可 用 空间 。 
| 【示例 】 下 面 示例 定义 左 侧 边栏 的 宽度 为 240px， 右 侧 边 栏 的 宽度 为 200px， 中 间 内 容 版 块 的 宽 
| 度 将 由 box-flex 属性 确定 。 详 细 代 码 如 下 所 示 : 
| <style type="text/css"> 
#container { 

必定 义 弹性 盒 布局 样式 刀 

display: -moz-box: 

display: -Webkit-box: 


display: box: 
} 
width: 240px: 
padding: 20pX: 
background-color: orange: 
} 
#contents { 


让 定义 中 间 列 宽度 为 自 适应 显示 */ 
-moz-box-flex: 1: 

-webkit-box-flex: 1: 

er 

padding: 20px: 

background-color: yellow: 


| 
| 
| 
| 
| 
| #left-sidebar { 
| 
| 
| 
| 
| 


} 
#right-sidebar { 
width: 200px: 
padding: 20px: 
background-color limegreen: 
| 
} 
| left-sidebar, #contents. fright-sidebar { 
| 上 * 定 义 盒 样 式 */ 
| -moz-box-sizing: border-box: 
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<li><a hre 全 "> 卜 算 子 。 咏 梅 </a></li> 
<li><a hre 全 "> 声 声 慢 。 寻 寻 砚 更 </a></i> 
<li><a hre 全 "> 雨 霖 铃 。 寒蝉 姜 切 </a></li> 
<li><a hre 全 "> 下 算 子 。 咏 梅 </a></i> 
<li><a hre 全 "> 更 多 </a></li> 
</nl> 
</div> 
<div id="contents"> 
<h1> 水 调 歌 头 。 明 月 几时 有 </h1> 
<h2> 苏 轼 <h2> 
<p> 丙 辰 中 秋 ， 欢 饮 达 旦 ， 大 酬 ， 作 此 篇 ， 兼 怀 子 由 。</p> 
<p> 明 月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫 阅 ， 今 夕 是 何 年 。 我 欲 乘 风 归 去 ， 又 恐 琼 楼 玉宇 ， 高 处 
不 胜 寒 。 起 舞 弄 清 影 ， 何 似 在 人 间 ? </p> 
<p> 转 朱 阁 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 向 别 时 圆 ? 人 有 翡 欢 离合， 月 有 阴 晴 圆 缺 ， 此 事 
古 难 全 。 但 愿 人 长 久 ， 千 里 共 婵 娟 。</p> 
</div> 
<div id="right-sidebar"> 
<h2> 词 人 列表 </h2> 
<ul> 
<li><a hre 伍 "> 陆游 </a></li> 
<li><a hre 仁 "> 李清照 </a></li> 
<li><a hre 伍 "> 苏轼 </a></li> 
<li><a hre 伍 "> 柳 永 </a></li> 
</ul> 
</div> 
</div> 


演示 效果 如 图 23.6 所 示 ， 当 调整 窗口 宽度 时 ， 中 间 列 的 宽度 会 自 适应 显示 ， 使 整个 页 面 总 是 满 
窗口 显示 。 


口 ecakomaoaofmyair 天 
CO oamo ysite /test1. hm 


水 调 歌 头 。 明 月 几时 有 
苏轼 

两 中 罗 。 天 这 达旦。 大 除 。 必 此 其 ， 关 全 了 由。 
明月 有? 拒 曾 癌 误 天。 不 知 天 上 富 阅 ， 信 儿 是 条 和 


。 穆 
共 滋 风 吕 去， 员 也 六 检 下 宇 ， 高 处 不 驻地 起 要 于 于 对， 何 
i 





et el 
全 月 有 阴 了 加 计 ， 此 事 古 准 全 。 全 页 人 长 多， 二 





图 23.6 定义 自 适 应 宽度 
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| 

| 
| 23.2.3 ”设置 顺序 

使 用 box-ordinal-group 属性 可 以 改变 子 元 素 的 显示 顺序 。 语 法 格式 如 下 : 





iote <integer> 用 整数 值 来 定义 伸缩 盒 对 象 的 子 元 素 显 示 顺 序 ， 默 认 值 为 1。 浏览 器 在 显示 时 ， 将 根据 





该 值 从 小 到 大 来 显示 这 些 元 素 。 

【示例 】 以 23.2.2 节 示 例 为 基础 ， 在 左 栏 、 中 栏 、 右 栏 中 分 别 加 入 一 个 box-ordinal-group 属性 ， 
| 并 指定 显示 的 序号 ， 这 里 将 中 栏 设 置 为 1， 右 栏 设置 为 2， 左 栏 设置 为 3， 则 可 以 发 现 三 栏 显示 顺序 
| 发 生 了 变化 ， 演 示 效 果 如 图 23.7 所 示 。 


水 调 歌 头 明月 几时 有 


苏轼 
两 尺 中 秋 ， 欢 饮 达 日， 大 醇 、 作 此 篇 ， 兼 剑 子 由。 

月 几时 有 ? 把 相同 家 天 。 不 知 天 上 宫 阅 ， 今 儿 是 人 有 年 。 拖 
Epi 取 芭 过 ， 训 外 不胜 奈 。 起 四 于 清 影 , 条 
似 在 人 同 

败 ， 低 纺 户 ， 艰 无眠 。 不 应 有 恨 ， 何 事 长 向 刚 B 国 ? 人 
和 让 月 有 阴 时 加快 ， 此 事 古 玖 全 。 但 厚 人 长 久 ， 干 





图 23.7 定义 列 显示 顺序 
23.2.4 设置 方向 
使 用 box-orient 可 以 定义 元 素 的 排列 方向 ， 语 法 格式 如 下 所 示 : 
box-orient:horizontal | vertical | inline-axis | block-axis 


取 值 简单 说 明 如 下 : 
horizontal: 设置 伸缩 盒 对 象 的 子 元 素 从 左 到 右 水 平 排列 。 
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vertical: 设置 伸缩 盒 对 象 的 子 元 素 从 上 到 下 纵向 排列 。 
回 inline-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 行 轴 排 列 。 | 
回 block-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 块 轴 排 列 。 
【示例 】 针 对 上 面 示例 ， 在 <div id="container"> 标 签 样式 中 加 入 box-orient 属性 ， 并 设 定 属性 值 | 
为 vertical， 即 定义 内 容 以 垂直 方向 排列 ， 则 代表 左 侧 边栏 、 中 间 内 容 、 右 侧 边栏 的 三 个 div 元 素 的 排 | 
列 方向 将 从 水 平方 向 改变 为 垂直 方向 ， 演 示 效 果 如 图 23.8 所 示 。 
#container { 
必定 义 弹性 盒 布 局 样式 六 


display: -moz-box: 
display: -webkit-box: 





让 定义 从 上 到 下 排列 显示 */ 
-moz-box-orient: Vertical: 
-Webkit-box-orient: vertical; 
box-orient: vertical: 


水 调 歌 头 。 明 月 几时 有 
苏轼 


两 展 中 秋 ， 欢 饮 达 日 ， 大 陵 ， 作 此 启 。 兼 剑 子 由 - 
Ego Cbd 不 知 天 上 言 网 ， 今 少 是 条 年 。 热 区 秉 风 上 归 去 ， 又 驰 谅 棋 玉 宇 ， 高 处 不 驻 桔 起 舞 于 竺 绢 ， 何 似 





和 入 慌 缔 户 ， 胎 无 眼 。 不 应 有 恨 ， 何 事 长 向 别 时 国 ? 人 有 芒 欢 高 辣 ， 月 有 阴 睛 百 缺 ， 此 事 古 太 全 但 原 入 长 久 , 干 旦 


23.8 定义 列 显示 方向 
使 用 box-direction 属性 可 以 让 各 个 子 元 素 反 向 排序 ， 语 法 格式 如 下 : 
box-direction:normal | reverse 


取 值 简单 说 明 如 下 : 
回 normmal; 设置 伸缩 盒 对 象 的 子 元 素 按 正常 顺序 排列 。 
回 reverse: 反 转 伸缩 盒 对 象 的 子 元 素 的 排列 顺序 。 


23.2.5 ”设置 对 齐 方式 


使 用 box-pack 可 以 设置 子 元 素 水 平方 向 对 齐 方式 ， 语 法 格式 如 下 : 
box-pack:start | center | end | justify 
取 值 简单 说 明 如 下 : 








| 
| 
| 
人 
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回 ”start， 设 置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 ， 为 默认 值 。 

回 center: 设置 伸缩 盒 对 象 的 子 元 素 居 中 对 齐 。 

回 end， 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

会 内 。 回 justiy: 设置 或 伸缩 全 对象 的 子 元 素 两 端 对 齐 。 

和 | 使 用 boxralign 可 以 设置 子 元 素 垂 直方 向 对 齐 方式 ， 语 法 格式 如 下 ; 


box-align:start | end | center | baseline | stretch 


| 取 值 简单 说 明 如 下 : 

| start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 。 

end: 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

center: 设置 伸缩 盒 对 象 的 子 元 素 居中 对 齐 。 

baseline: 设置 伸缩 盒 对 象 的 子 元 素 基线 对 齐 。 

stretch: 设置 伸缩 盒 对 象 的 子 元 素 自 适应 父 元 素 尺 寸 。 

| 【示例 】 在 下 面 示例 中 有 一 个 <div class="login"> 容 器 ， 其 中 包含 一 个 登录 表单 对 象 ， 为 了 方便 练 

| 习 ， 本 例 使 用 一 个 <img> 标 签 模拟 ， 然 后 使 用 box-pack 和 box-align 属性 让 表单 对 象 在 <div 
class="login"> 容 器 的 正中 央 显 示 。 同 时 ， 设 计 <div class="login"> 容 器 高 度 和 宽度 都 为 100%， 这 样 就 
可 以 让 表单 对 象 在 窗口 中 央 位 置 显示 ， 具 体 实现 代码 如 下 : 

| <style type="text/css"> 

目 清 除 页 边 距 */ 

body { margin: 0: padding: 0:} 

div { position: absolute; } 

.bg {l* 设 计 遮 日 层 #/ 

width: 10096: height 1000%: 

background: #000: opacity: 0.7: 


办 办 办 国 凶 





‘login { 

族 满 屏 显示 */ 
Width:10096: height:100%:; 
让 定义 弹性 盒 布 局 样式 */ 
display: -moz-box: 
display: -webkit-box: 
display: box: 

上 .垂直 居中 显示 */ 
-moz-box-align: center: 
-webkit-box-align: center: 
box-align: center: 

上 # 水 平 居中 显示 所 


了 
| 
| 
| 
| 
| 
| 
| 
| 国生 
| 
| 
| 
| 
| 
| 
| 
| 


| -moz-box-pack: center: 

| -webkit-box-pack: center: 

| box-pack: center: 

} 

</style> 

<div class="web"><img src="images/bg.png" /></div> 

<div class="bg"></div> 

<div class="login"><img src="images/login.pne” /></div> 


设计 效果 如 图 23.9 所 示 。 
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23.9 设计 登录 表单 中 央 显示 
23.3 ”新 版 伸缩 盒 


伸缩 盒 模型 是 一 个 新 的 盒子 模型 ， 它 主要 优化 了 UI 布局 ， 可 以 简单 地 使 一 个 元 素 居中 〈 包 括 水 | 
平和 垂直 居中 )， 可 以 扩大 或 收缩 元 素来 填充 容器 的 可 利用 空间 ， 可 以 改变 布局 顺序 等 。 本 节 将 重点 
介绍 新 版 本 伸缩 盒 模型 的 基本 用 法 。 


23.3.1 认识 Flexbox 系统 


Flexbox 由 伸缩 容器 和 伸缩 项 目 组 成 。 | 

在 伸缩 容器 中 ,每 一 个 子 元 素 都 是 一 个 伸缩 项 目 ， 伸 缩 项 目 可 以 是 任意 数量 的 ， 伸 缩 容器 外 和 伸 | 
缩 项 目 内 的 一 切 元 素 都 不 受 影响 。 

伸缩 项 目 沿 着 伸缩 容器 内 的 一 个 伸缩 行 定位 , 通常 每 个 伸缩 容器 只 有 一 个 伸缩 行 。 在 默认 情况 下 ， 
伸缩 行 和 文本 方向 一 致 : 从 左 至 右 ， 从 上 到 下 。 

常规 布局 是 基于 块 和 文本 流 方向 ， 而 Flex 布局 是 基于 flex-flow 流 。 如 图 23.10 所 示 是 W3C 规范 | 
对 Flex 布局 的 解释 。 


main size 





-cross start 










main axis 


--crossend 


main 
end 


23.10 Flex 布局 模式 


伸缩 项 目 是 沿 着 主轴 (main axis)， 从 主轴 起 点 main-start) 到 主轴 终点 Cmainend)， 或 者 沿 着 | 
侧 轴 (cross axis)， 从 侧 轴 起 点 〈ceross-start) 到 侧 轴 终 点 〈cross-end) 排列 。 
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回 主轴 (main axis) : 伸缩 容器 的 主轴 ， 伸 缩 项 目 主要 沿 着 这 条 轴 进 行 排列 布局 。 注 意 ， 它 不 
一 定 是 水 平 的 ， 这 主要 取决 于 justify-content 属性 设置 。 
回 主轴 起 点 (main-start) 和 主轴 终点 (main-end) : 伸缩 项 目 放置 在 伸缩 容器 内 从 主轴 起 点 











全 fF | (main-start) 向 主轴 终点 (main-end) 方向 。 
| 主轴 尺寸 (main size) : 伸缩 项 目 在 主轴 方向 的 宽度 或 高 度 就 是 主轴 的 尺寸 。 伸 缩 项 目 主要 
的 大 小 属性 要 么 是 宽度 ， 要 么 是 高 度 属性 ， 由 哪 一 个 对 着 主轴 方向 决定 。 
| 侧 轴 (cross axis) : 垂直 于 主轴 称 为 侧 轴 。 它 的 方向 主要 取决 于 主轴 方向 。 
侧 轴 起 点 (cross-start) 和 侧 轴 终点 〈cross-end) : 伸缩 行 的 配置 从 容器 的 侧 轴 起 点 边 开始 ， 


往 侧 轴 终 点 边 结束 。 
侧 轴 尺 寸 (cross size) : 伸缩 项 目 在 侧 轴 方向 的 宽度 或 高 度 就 是 项 目的 侧 轴 长 度 ， 伸 缩 项 目 
的 侧 轴 长 度 属性 是 width 或 height 属性 ， 由 哪 一 个 对 着 侧 轴 方向 决定 。 
| 一 个 伸缩 项 目 就 是 一 个 伸缩 容器 的 子 元 素 ,伸缩 容器 中 的 文本 也 被 视 为 一 个 伸缩 项 目 。 伸 缩 项 目 
| 中 的 内 容 与 普通 文本 流 一 样 。 例 如 ， 当 一 个 伸缩 项 目 被 设置 为 浮动 , 用 户 依然 可 以 在 这 个 伸缩 项 目 中 
| 放置 一 个 浮动 元 素 。 


23.3.2 ”启动 伸缩 盒 


| 通过 设置 元 素 的 display 属性 为 flex 或 inline-flex 可 以 定义 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 
| 泻 染 为 一 个 块 级 元 素 ， 而 设置 为 inline-flex 的 容器 则 演 染 为 一 个 行内 元 素 。 有 具体 语法 如 下 : 

| display: flex | inline-flex: 

| 上 面 语法 定义 伸缩 容器 ， 属 性 值 决定 容器 是 行内 显示 ， 还 是 块 显示 ， 它 的 所 有 子 元 素 将 变 成 flex 
| 文档 流 ， 被 称 为 伸缩 项 目 。 

| 此 时 ，CSS 的 columns 属性 在 伸缩 容器 上 没有 效果 ， 同 时 float、clear 和 vertical-align 属性 在 伸缩 
| 项 目 上 也 没有 效果 。 

【示例 】 下 面 示例 设计 一 个 伸缩 容器 ， 其 中 包含 四 个 伸缩 项 目 ， 演 示 效 果 如 图 23.11 所 示 。 





图 23.11 ”定义 伸缩 盒 布局 


<style type="text/css"> 
.flex-container { 

| display: -webkit-flex: 

| display: flex: 

| width: 500px: height: 300px: 
| border: solid 1px red: 
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| 

| 
flex-item { | 

background-color blue: | 

width: 200px: height: 200px: | 

margin: 10px: | 
} | 
</style> 





<div class="flex-container"> 
<div class="flex-item"> 促 缩 项 目 1</div> 
<div class="flex-item"> 伸 缩 项 目 2</div> 
<div class="flex-item"> 伸 缩 项 目 3</div> 
<div class="flex-item"> 伸 缩 项 目 4</div> 
</div> 


23.3.3 设置 主轴 方向 
使 用 flex-direction 属性 可 以 定义 主轴 方向 ， 它 适用 于 伸缩 容器 。 具 体 语法 如 下 : 


flex-direction:row | row-reverse | column | column-reverse 


取 值 说 明 如 下 : 
回 row: 主轴 与 行内 轴 方向 作为 默认 的 书写 模式 。 即 横向 从 左 到 右 排 列 〈 左 对 齐 ) 。 
回 ” row-reverse: 对 齐 方式 与 row 相反 。 
回 column: 主轴 与 块 轴 方向 作为 默认 的 书写 模式 。 即 纵向 从 上 往 下 排列 〈 顶 对 齐 ) 。 
回 “column-reverse: 对 齐 方式 与 column 相反 。 
【示例 】 在 23.3.2 节 示 例 基础 上 ， 本 例 设计 一 个 伸缩 容器 ， 其 中 包含 四 个 伸缩 项 目 ， 然 后 定义 伸 
缩 项 目 从 上 往 下 排列 ， 演 示 效 果 如 图 23.12 所 示 。 




















图 23.12 定义 伸缩 项 目 从 上 往 下 布局 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
-webkit-flex-direction: column: 
flex-direction: column: 
width: S00px:height: 300px:border: solid 1px red: 
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| flex-item { 

| background-color: blue: 

| width: 200px: height: 200px: 
margin: 10px: 





</style> 


占 | 23.3.4 ”设置 行 数 


flex-wrap 定义 伸缩 容器 是 单行 还 是 多 行 显示 伸缩 项 目 , 侧 轴 的 方向 决定 了 新 行 堆放 的 方向 。 具体 
语法 格式 如 下 : 
flex-wrap:nowrap | wrap | wrap-reverse 


取 值 说 明 如 下 : 

回 nowrap: flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 溢出 容器 。 

回 wrap: ”flex 容器 为 多 行 。 该 情况 下 flex 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 生 
断 行 。 

回 ”wrap-reverse: 反 转 wrap 排列 。 

| 【示例 】 在 上 面 示例 基础 上 ， 下 面 示例 设计 一 个 伸缩 容器 ， 其 中 包含 四 个 伸缩 项 目 ， 然 后 定义 伸 

| 缩 项 目 多 行 排列 ， 演 示 效 果 如 图 23.13 所 示 。 








yD localhosumystenestne x 





@ 3 localhost = 














图 23.13 定义 伸缩 项 目 多 行 布局 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
-webkit-flex-wrap: wrap: 
flex-wrap: wrap; 
width: S00px: height: 300px:border solid 1px red: 


| flex-item { 

| background-color: blue: 

| width: 200px: height: 200px: 
| margin: 10px: 
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【补充 】 | 

flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 复合 属性 ， 适 用 于 伸缩 容器 。 该 属性 可 以 同时 | 
定义 伸缩 容器 的 主轴 和 侧 轴 。 其 默认 值 为 row nowrap。 具 体 语法 如 下 : | 

flex-flow:<' flex-direction > || < flex-wrap > 

取 值 说 明 如 下 : 

< flex-direction>: 定义 弹性 盒子 元 素 的 排列 方向 。 

< flex-wrap>: 控制 flex 容器 是 单行 或 者 多 行 。 


23.3.5 ”设置 对 齐 方式 


1. 主轴 对 齐 

justify-content 定义 伸缩 项 目 沿 着 主轴 线 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 具 体 语法 如 下 : 
justify-content:flex-start | flex-end | center | space-between | space-around 

取 值 说 明 如 下 : 

flex-start: 为 默认 值 ， 伸 缩 项 目 向 一 行 的 起 始 位 置 靠 齐 。 

flex-end: 伸缩 项 目 向 一 行 的 结束 位 置 靠 齐 。 

center: 伸缩 项 目 向 一 行 的 中 间 位 置 靠 齐 。 

space-between: 伸缩 项 目 会 平均 地 分 布 在 行 里 。 第 一 个 伸缩 项 目 在 一 行 中 的 最 开始 位 置 ， 最 
后 一 个 伸缩 项 目 在 一 行 中 最 终点 位 置 。 

space-around: 伸缩 项 目 会 平均 地 分 布 在 行 里 ， 两 端 保留 一 半 的 空间 。 

上 述 取 值 比较 效果 如 图 23.14 所 示 。 


(a) flex-start (b) flex-end (¢) center 


(d) space-between (Ce) space-around 
图 23.14 主轴 对 齐 示 意图 





办 办 办 办 





2. 侧 轴 对 齐 

align-items 定义 伸缩 项 目 在 侧 轴 上 的 对 齐 方 式 ， 该 属性 适用 于 伸缩 容器 。 具 体 语法 如 下 : 
align-items:flex-start | flex-end | center | baseline | stretch 

取 值 说 明 如 下 : 

flex-start: 伸缩 项 目 在 侧 轴 起 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 起 始 的 边 。 

flex-end: 伸缩 项 目 在 侧 轴 终 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 终 点 的 边 。 

center: 伸缩 项 目的 外 边 距 盒 在 该 行 的 侧 轴 上 居中 放置 。 

baseline: 伸缩 项 目 根据 它们 的 基线 对 齐 。 

stretch: 默认 值 ， 伸 缩 项 目 拉 伸 填充 整个 伸缩 容器 。 此 值 会 使 项 目的 外 边 距 盒 的 尺寸 在 遵照 
min/max-width/height 属性 的 限制 下 尽 可 能 接近 所 在 行 的 尺寸 。 


加 罗网 加 加 
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上 述 取 值 比较 效果 如 图 23.15 所 示 。 





(a) flex-start (b) flex-end (c) center 
(d) stretch (Ce) baseline 


图 23.15 ” 侧 轴 对 齐 示意 图 
3. 伸缩 行 对 齐 
align-content 定义 伸缩 行 在 伸缩 容器 里 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 类 似 于 伸缩 项 目 在 
主轴 上 使 用 justify-content 属性 一 样 ， 但 本 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。 有 具体 语法 如 下 ; 
align-content:flex-start | flex-end | center | space-between | space-around | stretch 
取 值 说 明 如 下 : 
flex-start: 各 行 向 伸缩 容器 的 起 点 位 置 堆 斗 。 
flex-end: 各 行 向 伸缩 容器 的 结束 位 置 堆 车 。 
center: 各 行 向 伸缩 容器 的 中 间 位 置 堆 车 。 
space-between: 各 行 在 伸缩 容器 中 平均 分 布 。 
space-around: 各 行 在 伸缩 容器 中 平均 分 布 ， 在 两 边 各 有 一 半 的 空间 。 
stretch: 默认 值 ， 各 行将 会 伸展 以 占用 剩余 的 空间 。 
- 述 取 值 比较 效果 如 图 23.16 所 示 。 


于 罗 办 办 办 加 


(a) flex-start (b) flex-end (c) center 
(d) stretch (Ce) space-between (f) space-around 


图 23.16 ”伸缩 行 对 齐 示意 图 


【示例 】 下 面 示例 以 上 面 示例 为 基础 ， 定 义 伸缩 行 在 伸缩 容器 中 居中 显示 ， 演 示 效 果 如 图 23.17 
所 示 。 


<style type="textcss"> 
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flex-container { 

display: -webkit-flex: 

display: flex: 

-webkit-flex-wrap: wrap; 

flex-wrap: wrap:; 

-webkit-align-content: center: 

align-content: center; 

‘width: S00px: height: 300px:border: solid 1px red:; ! 
} 1 
flex-item { | 

background-color: blue: 

width: 200px: height: 200px: 


Imargin: 10px; 





} 
</style> 









































图 23.17 定义 伸缩 行 居中 对 齐 

23.3.6 ”设置 伸缩 项 目 

伸缩 项 目 都 有 一 个 主轴 长 度 (Main Size) 和 一 个 侧 轴 长 度 (Cross Size)。 主 轴 长 度 是 伸缩 项 目 在 | 
主轴 上 的 尺寸 ， 侧 轴 长 度 是 伸缩 项 目 在 侧 轴 上 的 尺寸 。 一 个 伸缩 项 目的 宽 或 高 取决 于 伸缩 容器 的 轴 ， 
可 能 就 是 它 的 主轴 长 度 或 侧 轴 长 度 。 下 面 属性 适用 于 伸缩 项 目 ， 可 以 调整 伸缩 项 目的 行为 。 

1. 显示 位 置 

order 属性 可 以 控制 伸缩 项 目 在 伸缩 容器 中 的 显示 顺序 ， 具 体 语 法 如 下 : 

order: <integer> 

<integer> 用 整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 。 可 以 为 负 值 。 

2. 扩展 空间 

flex-grow 可 以 定义 伸缩 项 目的 扩展 能 力 ， 决 定 伸缩 容器 剩余 空间 按 比 例 应 扩展 多 少 空 间 。 具 体 
语法 如 下 : 











flex-grow: <number> 


<number> 用 数值 来 定义 扩展 比率 。 不 允许 负 值 ， 默 认 值 为 0。 
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| 如 果 所 有 伸缩 项 目的 flex-grow 设置 为 1， 那 么 每 个 伸缩 项 目 将 设置 为 一 个 大 小 相等 的 剩余 空间 。 
| 














| 如 果 给 其 中 一 个 伸缩 项 目 设置 flex-grow 为 2， 那 么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 目 所 
| 占 剩 余 空 间 的 两 倍 。 
3. 收缩 空间 
flex-shrink 可 以 定义 伸缩 项 目 收缩 的 能 力 ， 与 flex-grow 功能 相反 ， 具 体 语法 如 下 : 


| flex-shrink: <number> 

<number> 用 数值 来 定义 收缩 比率 。 不 允许 负 值 ， 默 认 值 为 1。 

| 4. 伸缩 比率 

| flex-basis 可 以 设置 伸缩 基准 值 ， 剩 余 的 空间 按 比 率 进行 伸缩 。 具 体 语法 如 下 : 
| flex-basis: <length> | <percentage> | auto | content 

| 取 值 说 明 如 下 : 

| 回 ”<length>: 用 长 度 值 来 定义 宽度 。 不 允许 负 值 。 

| <percentage>: 用 百分比 来 定义 宽度 。 不 允许 负 值 。 

| auto: 无 特定 宽度 值 ， 取 决 于 其 他 属性 值 。 

| content: 基于 内 容 自 动 计算 宽度 。 

| 【补充 】 

| flex 是 flex-grow、flex-shrink 和 flex-basis 三 个 属性 的 复合 属性 ， 该 属性 适用 于 伸缩 项 目 。 其 中 
| 第 二 个 和 第 三 个 参数 (flex-shrink、flex-basis) 是 可 选 参数 。 默 认 值 为 “0 1 auto”。 上 有 具体 语法 如 下 : 
| flex: none | [<flex-grow> <flex-shrink>? || <'flex-basis> ] 

| 

| 

| 

| 

| 

| 

| 


5. 对 齐 方式 
align-self 用 来 在 单独 的 伸缩 项 目 上 覆 写 默认 的 对 齐 方式 。 具 体 语法 如 下 : 
align-self: auto | flex-start | flex-end | center | baseline | stretch 


属性 值 与 align-items 的 属性 值 相同 。 
| 【示例 1】 以 上 面 示例 为 基础 ， 定 义 伸缩 项 目 在 当前 位 置 向 右 错 移 一 个 位 置 ， 其 中 第 一 个 项 目 位 
| 于 第 三 项 目的 位 置 , 第 二 个 项 目 位 于 第 三 个 项 目的 位 置 ， 最 后 一 个 项 目 移 到 第 一 个 项 目的 位 置 ,演示 
效果 如 图 23.18 所 示 。 

<style type="text/css"> 

.flex-container { 

display: -webkit-flex: 

| display: flex: 
| width: S00px: height: 300px:border: solid 1px red: 
| 
| 


} 

flex-item { background-color blue: width: 200px: height: 200px: margin: 10px:} 
flex-item:nth-child(0){ 

-webkit-order: 4: 

‘order: 4: 


flex-item:nth-child(1){ 


| 
| 
| } 
| 
| -webkit-order: 1: 
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order: 1; 

bh 

.flex-item:nth-child(2){ 
-webkit-order: 2; 
order: 2; 

.flex-item:nth-child(3){ 
-Webkit-order: 3; 
order: 3; 

} 

</style> 


【示例 2】“margin: auto; ”在 伸缩 盒 中 具有 强大 的 功能 ， 


<style type= "text/css"> 
.flex-container { 
display: -Webkit-flex: 
display: flex; 


‘width: S00px: height: 300px: border solid 1px red: 


】 


.flex-item { 


background-color: blue; width: 200px; height: 200px: 


margin: auto; 
} 
</style> 
<div class="flex-container"> 


<div class="flex-item"> 伸 缩 项 目 </div> 


</div> 


了 


NS 


-个 “auto” 的 margin 会 合并 剩余 的 空 
间 。 它 可 以 用 来 把 伸缩 项 目 挤 到 其 他 位 置 。 下 面 示例 利用 “margin-right: auto; ”， 定 义 包 含 的 项 目 居中 
显示 ， 效 果 如 图 23.19 所 示 。 
































C | localhost 





= 5 


























图 23.18 ”定义 伸缩 项 目 














错位 显示 





图 23.19 定义 伸缩 项 目 居中 显示 


23.4 伸缩 盒 版 本 比较 和 兼容 





本 节 将 重点 介绍 伸缩 盒 模型 的 旧版 本 、 混 合 版 本 和 新 版 本 之 间 的 用 法 差异 ， 以 及 兼容 方法 ， 以 便 


户 设计 在 不 同 浏览 器 上 都 能 了 


E 确 显示 的 弹性 布局 。 
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2 4.1 版 本 比较 和 兼容 方法 


| CSS3 伸缩 盒 布局 在 不 断 发 展 中 ， 并 不 断 升级 ， 大 致 经 历 了 三 个 阶段 ， 并 逐步 达到 稳定 ， 主 流 浏 
会 内 | 览 器 对 新 版 本 也 开始 完整 的 支持 。 
~ 2009 年 版 本 (旧版 本 ) : “display:box:”。 
回 2011 年 版 本 (混合 版 本 ) : “display:flexbox;” 

| 回 ”2012 年 版 本 (新 版 本 ) : “display:flex;”。 
如 果 把 Flexbox 新 语法 、 旧 语法 和 混合 语法 混合 在 一 起 使 用 ， 就 可 以 让 浏览 器 得 到 完美 的 展示 。 
| 当然 ， 在 使 用 Flexbox 时 ， 应 该 考虑 不 同 浏览 器 的 私有 属性 ， 如 Chrome 浏览 器 要 添加 前 组 -webkit-， 
| Firefox 浏览 器 要 添加 前 缀 -moz- 等 。 
1. 浏览 器 支持 状况 
各 主流 浏览 器 对 Flexbox 规范 不 同 版 本 的 支持 如 表 23.1 所 示 。 


表 23.1 浏览 器 对 规范 版 本 的 支持 











Safari 





TT EE EE EN 
| re) [vey | eCwe) 


2. 开启 Flexbox 
不 同 Flexbox 版 本 定义 一 个 元 素 为 伸缩 容器 的 方法 比较 如 表 23.2 所 示 。 
表 23.2 ”比较 启动 Flexbox 


规范 版 本 属性 名 称 块 伸缩 容器 内 联 伸缩 容器 
| diphy | nx | 


| 
| 
| 
| 
| 
| 
ET 
| 
| 
| 
| 





| 新 版 本 (标准 版 ) inline-flex 
| 混合 版 本 inline-flexbox 
| 旧版 本 inline-box 


3. 主轴 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 主轴 对 齐 方 式 的 取 值 比较 如 表 23.3 所 示 。 
表 23.3 ”比较 主轴 对 齐 方 式 











justify distribute 
space-between | space-around 
justify | distribute 

justify N/A 





新 版 本 (标准 版 ) | justify-content 
混合 版 本 | flex-pack 
box-pack 





















start: 开始 位 置 。 

center: 中 间 位 置 。 

end: 结束 位 置 。 

justify: 两 端 对 齐 。 
distribute: 均匀 对 齐 。 
N/A: 表示 不 适用 的 意思 。 


办 办 办 办 办 
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4. 侧 轴 对 齐 方式 | 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 侧 轴 对 齐 方式 的 取 值 比较 如 表 23.4 所 示 。 | 
上 

表 23.4 ”比较 侧 轴 对 齐 方式 | 


规范 版 本 属性 名 称 end i stretch 

新 版 本 (标准 版 ) align-items flex-start center flex-end i stretch 

混合 版 本 i i stretch 

旧版 本 -ali Start center i stretch 
次 提示 : baseline: 基线 对 齐 。 
stretch: 伸展 对 齐 。 











5 单个 伸缩 项 目 侧 轴 对 齐 方式 
不 同 Flexbox 版 本 指定 单个 伸缩 项 目 沿 侧 轴 对 齐 方式 的 取 值 比较 如 表 23.5 所 示 。 
表 23.5 ”比较 单个 伸缩 项 目 侧 轴 对 齐 方式 


| 属性 名 称 | auto | start | center | end | baseine | stetoh 
新 版 本 《标准 版 ) | alignself |awo | exstat | center [flexend [baseline | sheteh 
[exitematin |awo | sa |eemer | ad | bascine | sneth 


6. 伸缩 项 目 行 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 行 在 侧 轴 的 对 齐 方式 的 取 值 比较 如 表 23.6 所 示 。 
表 23.6 ”比较 伸缩 项 目 行 对 齐 方式 


规范 版 本 FE ee | ao | 一 拉 由 | mso | streteh 
新 版 本 标准 版 ) nem exer [em | neced [spcebeeen poco sueteh 


混合 版 本 flex-line-pack distribute stretch 
旧版 本 N/A 











< 拟 注意 :只 有 仲 缩 项 目 有 多 行 时 才 生 效 ， 这 种 情况 发 生 在 只 有 伸缩 容器 设置 了 flex-wrap 为 wrap | 
时 ,并 且 没 有 足够 的 空间 把 伸缩 项 目 放 在 同一 行 中 。 这 个 将 对 每 一 行 起 作用 而 不 是 每 一 个 
伸缩 项 目 。 


7. 显示 顺序 
不 同 Flexbox 版 本 指定 伸缩 项 目的 显示 顺序 的 取 值 比较 如 表 23.7 所 示 。 
表 23.7 比较 显示 顺序 


规范 版 本 属 性 值 
新 版 本 〈 标 准 版 ) <number> 


混合 版 本 umber> 
旧版 本 box-ordinal-eroup <integer> 
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8. 伸缩 性 
不 同 Flexbox 版 本 指定 伸缩 项 目 如 何 伸缩 ， 比 较 如 表 23.8 所 示 。 


| 表 23.8 ”比较 伸缩 性 
网 规范 版 本 


| 混合 版 本 
旧版 本 


flex 属性 在 微软 的 草案 与 新 标准 或 多 或 少 不 一 样 。 主 要 区 别 在 于 : 它们 都 转换 成 标准 缩写 版 本 ， 
属性 值 为 flex-grow、 flex-shrink 和 flex-basis， 值 使 用 相同 的 方式 在 速记 。 然 而 ，flex-shrink 〈 以 前 称 
为 负 flex) 的 默认 值 为 1。 这 意味 着 伸缩 项 目 默认 不 能 收缩 。 以 前 ， 空 间 不 足 使 用 flex-shrink 比例 来 
必 缩 伸缩 项 目 ， 但 现在 可 以 在 flex-basis 的 基础 上 配合 flex-shrink 来 收缩 伸缩 项 目 。 


9. 伸缩 流 
不 同 Flexbox 版 本 指定 伸缩 容器 主轴 的 伸缩 流 方向 比较 如 表 23.9 所 示 。 
表 23.9 ”比较 伸缩 流 


规范 版 本 属性 名 称 Reversed horizontal Reversed vertical 
新 版 本 (标准 版 column-reverse 


混合 版 本 | fex-direction | | mw | | ow-reverse | | cm | column-reverse 


box-orient Horizontal Horizontal Vertical Vertical 
旧版 本 
box-direction normal reverse normal Teverse 


在 旧版 本 规范 中 ， 使 用 box-direction 属性 设置 为 reverse 和 在 新 版 本 中 设置 row-reverse 或 
column-reverse 得 到 的 效果 相同 。 如 果 想 要 的 效果 是 row 或 column， 可 以 省 略 不 设置 ， 因 为 normal 
是 默认 的 初始 值 。 

当 设 置 direction 为 reverse， 主 轴 就 翻转 。 例 如 ， 当 使 用 “lr” 书写 模式 ， 指 定 row-reverse 时 ， 
所 有 伸缩 项 目 会 从 右 向 左 排列 。 类 似 地 ，column-reverse 将 会 使 所 有 伸缩 项 目 从 下 向 上 排列 ， 来 代替 
从 上 往 下 排列 。 

在 旧版 本 中 ， 需 要 使 用 box-orient 来 设置 书写 模式 的 方向 。 当 使 用 “ltr” 模 式 时 ，horizontal 可 用 
在 inline-axis，vertical 可 用 在 block-axis。 如 果 使 用 的 是 一 个 自 上 而 下 的 书写 模式 , 如 东亚 传统 的 书写 
模式 ， 这 些 值 就 会 翻转 。 

10. 换行 

不 同 Flexbox 版 本 指定 伸缩 项 目 是 否 沿 着 侧 轴 排 列 ， 比 较 如 表 23.10 所 示 。 







属 性 值 


none | [ <flex-erow> <flex-shrink>? || <flex-basis>] 











none |[[ <pos-flex> <neg-flex>? ] || <preferred-size> ] 





<number> 














表 23.10 ”比较 换行 











属性 名 称 No wrapping Wrapping Reversed wrap 








flex-wrap nowrap wrap wrap-reverse 








flex- a ae wrap-reverse 
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wrap-reverse 让 伸缩 项 目 在 侧 轴 上 进行 start 和 end 翻转 ， 所 以 ， 如 果 伸缩 项 目 在 水 平 排列 ， 伸 缩 | 
项 目 翻转 不 会 到 一 个 新 的 线 下 面 , 它 会 翻转 到 一 个 新 的 线 上 面 。 简单 理解 就 是 伸缩 项 目 只 是 上 下 或 前 | 
后 翻转 顺序 。 | 


23.4.2 ”案例 : 设计 3 栏 页 面 


下 面 示例 根据 2322 节 介 绍 的 方法 ,使用 不 同 版 本 语法 ,设计 一 个 妆容 对 
不 同 设备 和 浏览 器 的 弹性 页 面 ， 演 示 效 果 如 图 23.20 所 示 。 
具体 操作 步 又 请 扫 码 学 习 。 





€ 3 EET -ac 


水 调 歌 头 . 明 月 几时 有 


苏轼 


两 辰 中 秋 ， 欢 饮 达 旦 ， 大 醇 ， 作 此 篇 ， 状 怀 子 由 。 
明月 几时 有 ? 把酒 问 青天 。 不 知 天 上 高 阅 ， 今 儿 是 何 年 。 牧 褒 
Te RE EN NE 


转 朱 阁 ， 低 绮 户 ， 朋 无眠 。 不 应 有 恨 ， 何 事 长 向 别 时 国 ? 人 有 
Me 月 有 阴 晴 图 缺 ， 此 事 古 难 全 。 但 愿 人 长 久 , 千里 共 





图 23.20 定义 混合 伸缩 盒 布局 
23.4.3 案例: 设计 3 行 3 列 应 用 


本 例 借助 Flexbox 伸缩 盒 布局 ， 设 计 页 面 呈 现 3 行 3 列 布局 样式 ， 同 
能 够 根据 窗口 自 适 应 调整 各 自 空间 ， 以 满 屏 显示 ， 效 果 如 图 23.21 所 示 。 
具体 代码 解析 请 扫 码 学 习 。 





Article 








23.21 HIML5 应 用 文档 


*503。 


mR yo A ww 天 关 通 ( 拔 训 本 全 反 ) 


23.5 在 线 练 习 


Flexbox 3 个 不 同 版 本 的 规范 对 应 着 不 同 的 实现 。 需 要 关注 哪个 版 本 ， 取 决 于 需要 支持 的 浏览 器 。 
国 加 
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CSS3 动画 


CSS3 动画 包括 过 渡 动 画 和 关键 帧 动画 ， 它 们 主要 通过 改变 CSS 属性 值 来 模拟 实现 。 本 
章 将 详细 介绍 Transform、Transitions 和 Animations 三 大 功能 模块 ， 其 中 Transform 实现 对 网 
页 对 象 的 变形 操作 ，Transitions 实现 CSS 属性 过 渡 变 化 ，Animations 实现 CSS 样式 分 步 式 


演示 效果 。 


【 学 习 重 点 】 


| 


至 至 至 


设计 对 象 变形 操作 。 

设计 过 渡 样 式 。 

设计 关键 帧 动画 。 

能 够 灵活 使 用 CSS3 动画 设计 页 面 将 效 。 


gm es A 
总 


24.1 CSS3 变形 


2012 年 9 月 ，W3C 发 布 了 CSS3 变形 工作 草案 。CSS3 变形 允许 CSS 把 元 素 转 
变 为 2D 或 3D 空间 ， 这 个 草案 包括 了 CSS3 2D 变形 和 CSS3 3D 变形 。 
权威 参考 : http://www.w3.org/TR/css-transforms-1/。 





| 权威 参 
24.1.1 认识 Transform 


| CSS3 变形 是 多 种 效果 的 集合 ， 如 旋转 、 缩 放 、 平 移 和 倾斜 等 ， 每 个 效果 都 被 称 为 变形 函数 ， 它 

| 们 可 以 操控 元 素 发 生 旋转 、 缩 放 、 平 移 和 倾斜 等 变化 。 在 CSS3 之 前 ， 实 现 类 似 的 效果 都 需要 图 片 、 

| Flash 或 JavaScript 才能 完成 。 而 使 用 纯 CSS 来 完成 这 些 变形 则 无 须 加 载 这些 额 外 的 文件 ， 提 升 了 开 

| 发 效率 ， 提 高 了 页 面 的 执行 效率 。 

| CSS3 变形 包括 3D 变形 和 2D 变形 , 3D 变形 使 用 基于 2D 变形 的 相同 属性 , 如 果 了 解 了 2D 变形 ， 
会 发 现 3D 变形 与 2D 变形 的 功能 类 似 。 

CSS 2D Transform 获得 了 各 主流 浏览 器 的 支持 , 但 是 CSS 3D Transform 支持 程度 不 是 很 完善 。 考 

| 虑 到 浏览 器 兼容 性 ，3D 变形 在 实际 应 用 时 应 添加 私有 属性 ， 并 且 个 别 属性 在 某 些 主流 浏览 器 中 并 未 

| 得 到 很 好 的 支持 ， 简 单 说 明 如 下 ; 

在 正 10+ 中 ，3D 变形 部 分 属性 未 得 到 很 好 的 支持 。 

Firefox 10.0 至 Firefox 15.0 版 本 的 浏览 器 ， 在 使 用 3D 变形 时 需要 添加 私有 属性 -moz-， 但 从 

Firefox 16.0+ 版 本 开始 无 须 添 加 浏览 器 私有 属性 。 

Chrome 12.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Safari 4.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Opera 15.0+ 版 本 才 开 始 支持 3D 变形 ， 使 用 时 需要 添加 私有 属性 -webkit-。 

移动 设备 中 iOS Safari 3.2+、 Android Browser 3.0+、 Blackberry Browser 7.0+、Opera Mobile 24.0+、 

Chrome for Android 25.0+ 都 支持 3D 变形 , 但 在 使 用 时 需要 添加 私有 属性 -webkit-; Firefox for 

Android 19.0+ 支 持 3D 变形 ， 但 无 须 添加 浏览 器 私有 属性 。 


| 24.1.2 设置 原点 

| 

视频 讲解 | CSS 变形 的 原点 默认 为 对 象 的 中 心 点 (50% 50%)， 使 用 transform-origin 属性 可 以 重新 设置 新 的 
| 变形 原点 。 语 法 格式 如 下 所 示 : 
| transform-origin:[ <percentage> | <length> | lef | center@® | right ] [ <percentage> | <length> | top | center® | 
| bottom ]? 

| 取 值 简单 说 明 如 下 : 

| <percentage>: 用 百分比 指定 坐标 值 。 可 以 为 负 值 。 

<length>: 用 长 度 值 指定 坐标 值 。 可 以 为 负 值 。 

left， 指 定 原点 的 横 坐标 为 left。 

center(CD): 指定 原点 的 横 坐 标 为 center。 

right: 指定 原点 的 横 坐 标 为 right。 

top: 指定 原点 的 纵 坐 标 为 top。 


四 加 


办 办 办 办 







因 因 办 办 办 罗 
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center@): 指定 原点 的 纵 坐标 为 center。 
bottom: 指定 原点 的 纵 坐 标 为 bottom 。 | 
【示例 】 通 过 重 置 变形 原点 ， 可 以 设计 不 同 的 变形 效果 。 在 下 面 示例 中 以 图 像 的 右上 角 为 原点 逆 | 
时 针 旋 转 图 像 44" ， 则 比较 效果 如 图 24.1 所 示 。 | 
<style type="text/css"> 
img {/* 固定 两 幅 图 像 相同 大 小 和 相同 显示 位 置 */ 
position: absolute: | 
left: 20px: | 
top: 10px: 
width: 170px: 
width: 250px: 





b 

img.bg {/* 设置 第 1 幅 图 像 作为 参考 */ 
opacity: 0.3; 
border: dashed 1px red: 


} 

img.change {/* 变形 第 2 幅 图 像 */ 
border solid 1px red: 
transform-origin: top right ”/* 以 右上 角 为 原点 进行 变形 */ 
transform: rotate(-45deg); 。/* 逆 时 针 旋转 45 度 */ 

} 

</style> 

<img class="bg" src="images/1.jpg"> 

<img class="change" src="images/1.jpg"> 








图 24.1 自 定义 旋转 原点 





24.1.3 2D 旋转 
rotate() 函 数 能 够 在 2D 空间 内 旋转 对 象 ， 语 法 格式 如 下 : 
rotate(<angle>) 


参数 angle 表示 角度 值 ， 取 值 单位 可 以 是 : 度 ， 如 90deg (90° ， 一 圈 为 360” ); 梯度 ， 如 100grad 


| 
| 
(相当 于 90" ，360° 等 于 400grad); 弧度 ， 如 1.57rad ( 约 等 于 90" ，360° 等 于 2x); 圈 ， 如 0.25$tum E 
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| (等 于 90"，360" 等 于 ltum)。 
| 【示例 】 以 24.1.2 节 示 例 为 基础 ， 下 面 按 默认 原点 逆 时 针 旋 转 图 像 45” ， 效 果 如 图 24.2 所 示 。 
| img.change { 
| | border: solid 1px red: 
全 |] transform: rotate(-45deg); 


Xte 








| 图 24.2 定义 旋转 效果 
24.1.4 2D 缩放 


scale0 函 数 能 够 缩放 对 象 大 小 ， 语 法 格式 如 下 : 
scale(<number>[, <number>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 宽 和 高 缩放 比例 。 取 值 简单 说 明 如 下 : 

如 果 取 值 为 正 数 ， 则 基于 指定 的 宽度 和 高 度 将 放大 或 缩小 对 象 。 

如 果 取 值 为 负数 ， 则 不 会 缩小 元 素 ， 而 是 翻转 元 素 ( 如 文字 被 反 转 ) ， 然 后 再 缩放 元 素 。 
如 果 取 值 为 小 于 1 的 小 数 〈 如 0.5) ， 可 以 缩小 元 素 。 

如 果 第 二 个 参数 省 略 ， 则 第 二 个 参数 等 于 第 一 个 参数 值 。 

【示例 】 继 续 以 24.1.2 节 示 例 为 基础 ， 下 面 按 默 认 原 点 把 图 像 缩 小 一 倍 ， 效 果 如 图 24.3 所 示 。 











图 24.3 缩小 对 象 一 倍 效果 
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img.change { 
border solid 1px red: 
transform: scale(0.5): 





} 


24.1.5 2D 平移 


translate0 函 数 能 够 平移 对 象 的 位 置 ， 语 法 格式 如 下 : 
translate(<translation-value>[. <translation-value>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 X 轴 和 Y 轴 相 对 于 原点 的 偏 移 距离 。 如 果 省 略 参 
数 ， 则 默认 值 为 0。 如 果 取 负 值 ， 则 表示 反 向 偏 移 ， 参 考 原点 保持 不 变 。 
【示例 】 下 面 示例 设计 向 右 下 角 方 向 平移 图 像 ， 其 中 和 轴 偏 移 150 像素 ，Y 轴 偏 移 50 像素 , 演 | 
示 效 果 如 图 24.4 所 示 。 
img.change { 
border solid 1px red: 
transform: translate(150px, SOpx); 





DD 








24.4 平移 对 象 效果 


24.1.6 2D 倾斜 


skew(0 函 数 能 够 倾斜 显示 对 象 ， 语 法 格式 如 下 : 

Skew(<angle> [. <angle>]) 

该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 义 轴 和 YY 轴 倾 斜 的 角度 。 如 果 省 略 参 数 ， 则 默认 
值 为 0。 与 rotate0 函 数 不 同 ，rotate0 函 数 只 是 旋转 对 象 的 角度 ， 而 不 会 改变 对 象 的 形状 ; skew0 函 数 
会 改变 对 象 的 形状 。 | 

【示例 】 下 面 示例 使 用 skew0 函 数 变 形 图 像 ，X 轴 倾 斜 30", Y 轴 倾 斜 20”, 效果 如 图 24.5 所 示 。 } 


img.change { 
border: solid 1px red: 
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图 24.5 倾斜 对 象 效果 
24.1.7 2D 和 矩 阵 


matrix0 是 一 个 矩阵 函数 ， 它 可 以 同时 实现 缩放 、 旋 转 、 平 移 和 倾斜 操作 ， 语 法 格式 如 下 ; 
matrix(<number>, <number>, <number>, <number>, <number>, <number>) 
该 函数 包含 6 个 值 ， 具 体 说 明 如 下 : 
第 1 个 参数 控制 X 轴 缩放 ; 
第 2 个 参数 控制 X 轴 倾斜 ; 
回 ”第 3 个 参数 控制 立轴 倾斜 ; 
回 第 4 个 参数 控制 Y 轴 缩放 ; 
回 第 5 个 参数 控制 X 轴 平 移 ， 
第 6 个 参数 控制 Y 轴 平 移 。 
【示例 】 下 面 示例 使 用 matrix0 函 数 模 拟 24.1.6 节 示 例 的 倾斜 变形 操作 ， 效 果 类 似 24.1.6 节 示 例 


transform: matrix(1, 0.6. 0.2. 1. 0. 0): 


一 


| 【补充 】 
| 多 个 变形 函数 可 以 在 一 个 声明 中 同时 定义 。 例 如 : 
| di 

transform: translate(80. 80): 

transform: rotate(45deg): 
| transform: scale(1.5. 1.5): 

} 

| 
| 针对 上 面 样式 ， 可 以 简化 为 ， 
| div { transform: translate(80. 80) rotate(45deg) scale(1.5. 1.5):} 
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24.1.8 设置 变形 类 型 


CSS3 变形 包括 2D 和 3D 两 种 类 型 ， 使 用 transform-style 属性 可 以 设置 CSS 变形 的 类 型 ， 语 法 格 
式 如 下 : ! 
transform-style:flat | preserve-3d 


取 值 简单 说 明 如 下 : 
回 fat:， 指定 子 元 素 位 于 该 元 素 所 在 平面 内 进行 变形 ， 即 2D 平面 变形 ， 为 默认 值 。 | 
加 ”preserve-3d: 指定 子 元 素 定位 在 三 维 空间 内 进行 变形 ， 即 3D 立体 变形 。 | 
【示例 】 借 助 上 面 示例 ， 下 面 示例 使 用 <div id="box"> 容 器 包含 两 帐 图像， 改进 后 的 HTML 结构 | 
如 下 所 示 。 
<div id="box"> 
<img class="bg" src="images/].ipe"> 
<img class="change" SIc="images/1.jpg"> 
</div> 
为 <div id="box"> 容 器 设置 CSS3 变形 类 型 为 3D， 样 式 代码 如 下 : 


#box { 
transform-style: preserve-3d:; 





} 
为 change 图 像 应 用 3D 顺 时 针 旋 转 45” ，CSS 样式 如 下 : 


img.change { 
border solid 1px red; 
transform: translate3d(60px, 60px, 400px): 


} 
在 浏览 器 中 预览 ， 如 图 24.6 所 示 。 








| 
图 24.6 3D 平移 效果 | 


24.1.9 ”设置 透视 距离 和 原点 





3D 变形 与 2D 变形 最 大 的 不 同 就 在 于 其 参考 的 坐标 轴 不 同 : 2D 变形 的 坐标 轴 是 平面 的 ， 只 存在 | 视频 讲解 
XX 轴 和 YY 轴 ， 而 3D 变形 的 坐标 轴 则 是 x、y、z 三 条 轴 组 成 的 立体 空间 ，X 轴 正 向 、Y 轴 正 向 、Z 轴 | 


“Hs 


a 0 


| 正 向 分 别 朝 向 右 、 下 和 屏幕 外 ， 示 意图 如 图 24.7 所 示 。 





图 24.7 3D 坐标 轴 示 意图 
透视 是 3D 变形 中 最 重要 的 概念 。 如 果 不 设 置 透视 ， 元 素 的 3D 变形 效果 将 无 法 实现 。 在 上 节 示 
| 例 中 ， 使 用 函数 rotateX(45deg) 将 图 像 以 X 轴 方向 为 轴 沿 顺 时 针 旋 转 45" ， 由 于 没有 设置 透视 样式 的 
效果 ， 可 以 看 到 浏览 器 将 图 像 的 3D 变形 操作 垂直 投射 到 2D 视 平面 上 ， 最 终 呈现 出 来 的 只 是 图 像 的 





| 宽 高 变化 。 
| 【示例 1】 如 果 在 24.1.8 节 示例 基础 上 , 在 <div id="box"> 容 器 外 ,设置 透视 点 距离 为 1200 像素 ， 
| 样式 代码 如 下 : 
body{ 
perspective: 1200px: 


} 
在 浏览 器 中 可 以 看 到 如 图 24.8 所 示 的 变形 效果 。 





24.8 沿 X 轴 3D 旋转 45" 效果 图 


基于 对 上 面 示例 的 直观 体验 ， 下 面 来 了 解 几 个 核心 概念 : 变形 元 素 、 观 察 者 和 被 观察 元 素 ， 关 系 
如 图 24.9 所 示 。 

| 变形 元 素 : 就 是 需要 进行 3D 变形 的 元 素 。 主 要 设置 transform 、transform-origin 、 

| backface-visibility 等 属性 。 

| 观察 者 : 就 是 浏览 器 模拟 出 来 的 用 来 观察 被 观察 元 素 的 一 个 没有 尺寸 的 点 , 观察 者 发 出 视线 ， 
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类 似 于 一 个 点 光源 发 出 光线 。 


被 观察 元 素 : 也 称 被 透视 元 素 ， 就 是 被 观察 者 观察 的 元 素 ， 根 据 属性 设置 的 不 同 ， 它 有 可 能 
是 变形 对 象 本 身 ， 也 可 能 是 它 的 父 级 或 祖先 元 素 ， 主 要 设置 perspective、perspective-origin 
等 属性 。 


和 X 轴 


立轴 





观察 者 可 移动 区 域 ( 黄 ) 


Z 轴 


图 24.9 变形 元 素 、 观 察 者 和 被 观察 元 素 位 置 关 系 示意 图 


1. 透视 距离 
透视 距离 是 指 观察 者 沿 着 平行 于 Z 轴 的 视线 与 屏幕 之 间 的 距离 , 也 称 为 视 距 , 示意 图 如 图 24.10 
所 示 。 
X 轴 





立轴 


Na 


图 24.10 透视 距离 示意 图 
使 用 perspective 属性 可 以 定义 透视 距离 ， 语 法 格式 如 下 : 
Perspective:none | <length> 
取 值 简单 说 明 如 下 : 
none: 不 指定 透视 。 
<length>: 指定 观察 者 距离 平面 的 距离 ， 为 元 素 及 其 内 容 应 用 透视 变换 。 
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< 轴 注意 : 透视 距离 不 可 为 0 和 负数 ， 因 为 观察 者 与 屏幕 距离 为 0 时 或 者 在 屏幕 背面 时 是 不 可 以 观 
察 到 被 透视 元 素 的 正面 的 。perspective 也 不 可 取 百 分 比 ， 因 为 百分比 需要 相对 的 元 素 ， 但 
乙 轴 并 没有 可 相对 的 元 素 尺寸 。 
一 般 地 ， 物 体 离 得 越 远 ， 显 得 越 小 。 反 映 在 perspective 属性 上 ， 就 是 该 属性 值 越 大 ， 元 素 的 3D 
变形 效果 越 不 明显 。 
设置 perspective 属性 的 元 素 就 是 被 透视 元 素 .一般 地 ,该 属性 只 能 设置 在 变形 元 素 的 父 级 或 祖先 
级 。 因 为 浏览 器 会 为 其 子 级 的 变形 产生 透视 效果 ， 但 并 不 会 为 其 自身 产生 透视 效果 。 应 用 示例 可 以 参 
考 上 面 示例 1。 
2. 透视 原点 
透视 原点 是 指 观察 者 的 位 置 ， 一 般 观察 者 位 于 与 屏幕 平行 的 另 一 个 平面 上 , 观察 者 始终 是 与 屏幕 
垂直 的 。 观 察 者 的 活动 区 域 是 被 观察 元 素 的 盒 模型 区 域 ， 示 意图 如 图 24.11 所 示 。 





Y 转 





Z 轴 


观察 者 可 移动 区 域 ( 黄 ) 


图 24.11 下 面 黄色 区 域 为 透视 原点 的 位 置 区 域 
使 用 perspective-origin 属性 可 以 定义 透视 点 的 位 置 ， 语 法 格式 如 下 : 


We ive-origin:[ <percentage> | <length> | left | center® | right ] [ <percentage> | <length> | top | center® | 
取 值 简单 说 明 如 下 : 
加 ”<percentage>: 用 百分比 指定 透视 点 坐标 值 ， 相 对 于 元 素 宽度 。 可 以 为 负 值 。 

<length>: 用 长 度 值 指定 透视 点 坐标 值 。 可 以 为 负 值 。 

left: 指定 透视 点 的 横 坐 标 为 left。 

centerD: 指定 透视 点 的 横 坐 标 为 center。 

right: 指定 透视 点 的 横 坐 标 为 right。 

top: 指定 透视 点 的 纵 坐标 为 top。 

center(@): 指定 透视 点 的 纵 坐 标 为 center。 

bottom: 指定 透视 点 的 纵 坐 标 为 bottom。 


回回 回回 罗 轿 回 
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【示例 2】 在 示例 1 基础 上 ， 设 置 观察 点 位 置 在 右 侧 居 中 位 置 ， 则 显示 效果 如 图 24.12 所 示 。 
body{ 
perspective: 1200px: 
perspective-origin: right; 





图 24.12 设置 观察 点 位 置 在 右 侧 的 效果 


24.1.10 ”3D 平移 


3D 平移 主要 包括 下 面 4 个 函数 : 
translatex(<translation-value>): 指定 对 象 和 X 轴 【水 平方 向 ) 的 平移 。 
translatey(<translation-value>): 指定 对 象 Y 轴 (垂直 方向 ) 的 平移 。 
translatez(<length>): 指定 对 象 Z 轴 的 平移 。 
translate3d(<translation-value>,<translation-value>,<length>): 指定 对 象 的 3D 平移 。 第 1 个 参 
数 对 应 义 轴 ， 第 2 个 参数 对 应 YY 轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 

参数 <translation-value> 表 示 <length> 或 <percentage>， 即 X 轴 和 YY 轴 可 以 取 值 长 度 值 或 百分比 ， 
但 是 Z 轴 只 能 够 设置 长 度 值 。 

【示例 】 下 面 示例 设计 图 像 在 3D 空间 中 平移 ， 设 计 一 种 错位 效果 ， 如 图 24.13 所 示 。 





办 多 多 加 








图 24.13 定义 3D 平移 效果 
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~ | border: solid 1px red: 
transform: translate3d(200px, 30px, 60px): 
} 
| 

从 图 24.13 效果 可 以 看 出 ， 当 Z 轴 值 越 大 时 ， 元 素 离 浏览 者 越 近 ， 从 视觉 上 元 素 就 变 得 更 大 ; 反 
| 之 其 值 越 小 时 ， 元 素 也 离 观看 者 越 远 ， 从 视觉 上 元 素 就 变 得 更 小 。 
忘 提示 : translateZ0 函 数 在 实际 使 用 中 等 效 于 translate3d(0.0.tz)。 仅 从 视觉 效果 上 看 ，translateZ0 

和 translate3d(0.0,tz) 函 数 功能 非常 类 似 于 二 维 空间 的 scale0) 缩 放 函 数 , 但 实际 上 完全 不 同 。 

translateZ() 和 translate3d(0.0,tz) 变 形 发 生 在 乙 轴 上 ， 而 不 是 和 轴 和 了 轴 。 


24.1.11 3D 缩放 


3D 缩放 主要 包括 下 面 4 个 函数 : 
scalex(<number>): 指定 对 象 X 轴 的 (水 平方 向 ) 缩放 。 
scaley(<number>): 指定 对 象 Y 轴 的 (垂直 方向 ) 缩放 。 
scalez(<number>): 指定 对 象 的 Z 轴 缩 放 。 
scale3d(<number>,<number>,<number>): 指定 对 象 的 3D 缩放 。 第 1 个 参数 对 应 义 轴 ， 第 2 
个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 
参数 <number> 为 一 个 数字 ， 表 示 缩 放 倍数 ， 可 参考 2D 缩放 参数 说 明 。 
【示例 】 下 面 以 上 面 示例 为 基础 ， 在 X 轴 和 Y 轴 放大 图 像 1.5 倍 ，Z 轴 放 大 图 像 2 倍 ， 然 后 使 用 
translatex0 把 变形 的 图 像 移 到 右 侧 显示 ， 以 便 与 原 图 进行 比较 ， 演 示 效 果 如 图 24.14 所 示 。 
img.change { 
border solid 1px red: 
transform: scale3D(1.5.1.5.2) translatex(240px): 





加 图 网 加 





图 24.14 定义 3D 缩放 效果 
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24.1.12 ”3D 旋转 


3D 旋转 主要 包括 下 面 4 个 函数 : 

rotatex(<angle>): 指定 对 象 在 X 轴 上 的 旋转 角度 。 

rotatey(<angle>): 指定 对 象 在 Y 轴 上 的 旋转 角度 。 

rotatez(<angle>): 指定 对 象 在 Z 轴 上 的 旋转 角度 。 

rotate3d(<number>,<number>,<number>,<angle>): 指定 对 象 的 3D 旋转 角度 ， 其 中 前 3 个 参 | 
数 分 别 表 示 旋 转 的 方向 x、y、z， 第 4 个 参数 表示 旋转 的 角度 ， 参 数 不 允 许 省 略 。 | 


总 提示 : rotate3d0 函 数 前 3 个 参数 值 分 别 用 来 描述 围绕 义 、Y、Z 轴 旋 转 的 矢量 值 。 最 终 变 形 元 素 | 
沿 着 由 (0,0,0) 和 (x,y,z) 这 两 个 点 构成 的 直线 为 轴 ， 进 行 旋转 。 当 第 4 个 参数 为 正 数 时 ， 元 
素 进行 顺 时 针 旋 转 ; 当 第 4 个 参数 为 负数 时 ， 元 素 进行 送 时 针 旋 转 。 
rotate3d0 函 数 可 以 与 前 面 3 个 旋转 函数 进行 转换 ， 简 单 说 明 如 下 : 
回 rotatex(a) 函 数 功能 等 同 于 rotate3d(1,0,0,a)。 
回 rotatey(a) 函 数 功能 等 同 于 rotate3d(0,1,0,a)。 
rotatez(a) 函 数 功能 等 同 于 rotate3d(0,0,1,a)。 
【示例 】 以 上 面 示例 为 基础 ， 使 用 rotate3d0 函 数 顺 时 针 旋 转 图 像 44" ， 其 中 义 轴 、Y 轴 和 ZzZ 轴 
比值 为 2、2、1， 效 果 如 图 24.15 所 示 。 
img.change { 
border: solid 1px red: 
transform: rotate3d(2,2,1.45deg): 








b 








24.15 定义 3D 旋转 效果 


24.1.13 ”透视 函数 


perspective 属性 可 以 定义 透视 距离 ， 它 应 用 在 变形 元 素 的 父 级 或 祖先 级 元 素 上 。 而 透视 函数 | 
perspective0 是 transform 变形 函数 的 一 个 属性 值 ， 可 以 应 用 于 变形 元 素 本 身 。 具 体 语法 格式 如 下 : 


perspective(<length>) 





| 
| 
| 


st7 


gm Re A 
| 参数 是 一 个 长 度 值 ， 值 只 能 是 正 数 。 

| 【示例 】 下 面 示例 设计 图 像 在 X 轴 上 旋转 120" ， 透 视 距离 为 1200 像素 ， 如 图 24.16 所 示 。 
| #box { transform-style: preserve-3d:} 


仿 F img.change { 


| border: solid 1px red: 
transform:perspective(180px) rotateX(120deg): 
下 
| 








24.16 定义 3D 旋转 效果 


| 4 注意 : 由 于 transform 属性 是 以 从 前 向 后 的 顺序 解析 属性 值 的 ， 所 以 一 定 要 把 Perspective0) 函 数 写 
在 其 他 变形 函数 前 面 ， 否 则 将 没有 透视 效果 。 


由 于 透视 原点 perspective-origin 只 能 设置 在 设置 了 perspective 透视 属性 的 元 素 上 。 若 为 元 素 设置 
| 透视 函数 perspective0， 则 透视 原点 不 起 作用 ， 观 察 者 使 用 默认 位 置 ， 即 元 素 中心 点 对 应 的 平面 。 
| 
| 


| 24.1.14 ”变形 原点 
2D 变形 原点 由 于 没有 乙 轴 ， 所 以 乙 轴 的 值 默认 为 0。 在 3D 变形 原点 中 , 乙 轴 是 一 个 可 以 设置 的 


transform-origin:x 轴 y 轴 z 轴 
| 取 值 简单 说 明 如 下 : 
回 x 轴 : left | center |right | <length> | <percentage>。 
| y 轴 : top | center | bottom | <length> | <percentage>。 
| z 轴 : <length>。 
| 对 于 XX 轴 和 YY 轴 来 说 ， 可 以 设置 关键 字 和 百分比 ， 分 别 相 对 于 其 本 身 元 素 水 平方 向 的 宽度 和 垂 





| 24.1.15 背景 可 见 


视频 讲解 | 元 素 的 背面 在 默认 情况 下 是 可 见 的 ， 有 时 可 能 需要 让 元 素 背 面 不 可 见 ， 这 时 候 就 可 以 使 用 
| backface-visibility 属性 ， 该 属性 的 具体 语法 格式 如 下 : 
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backface-visibility:visible | hidden 


取 值 简单 说 明 如 下 : 
visible: 指定 元 素 背 面 可 见 ， 允 许 显 示 正 面 的 镜像 ， 为 默认 值 。 
hidden 指定 元 素 背面 不 可 见 。 | 
【示例 】 在 24.1.13 节 示例 中 ， 如 果 在 变形 图 像样 式 中 添加 “backface-visibility: hidden;”， 定 义 元 | 
素 背 面 面 向 用 户 时 不 可 见 ， 这 时 如 果 再 次 预览 ， 则 会 发 现 变形 图 像 已 经 不 存在 ， 因 为 它 的 背面 面向 用 | 
户 ， 被 隐藏 了 ， 效 果 如 图 24.17 所 示 。 | 
img.change { 
border: solid 1px red: 
transform:perspective(180px) rotateX(120deg): 
backface-visibility: hidden: 











} 





24.17 定义 背面 面向 用 户 不 可 见效 果 





24.2 过 渡 动画 


2013 年 2 月 ，W3C 发 布 了 CSS Transitions 工作 草案 ,在 这 个 草案 中 描述 了 CSS 过 渡 动 画 的 基本 | 
实现 方法 和 属性 。 目 前 已 获得 所 有 浏览 器 的 支持 ， 包 括 支 持 带 有 前 级 (私有 属性 ) 或 不 带 前 组 的 过 渡 | 
(标准 属性 )。 最 新 版 本 浏览 器 (IE 10+、Firefox 16+ 和 Opera 12.5+) 均 支 持 不 带 前 组 的 过 渡 属 性 | 
transition， 而 旧版 浏览 器 则 支持 前 缀 的 过 渡 ， 如 Webkit 引擎 支持 -webkit-transition 私有 属性 ，Mozilla | 
Gecko 引擎 支持 -moz-transition 私有 属性 ，Presto 引擎 支持 -o-transition 私有 属性 ，IE 6 一 IE 9 浏览 器 不 | 
支持 transition 属性 ，IE 10 支持 transition 属性 。 | 
权威 参考 : http://www.w3.org/TR/css3-transitions/。 


24.2.1 设置 过 渡 属性 





权威 参考 
transition-property 属性 用 来 定义 过 渡 动 画 的 CSS 属性 名 称 ， 基 本 语法 如 下 所 示 : 
transition-property:none | al |[ <IDENT> ] [<IDENT> ]*: 
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取 值 简单 说 明 如 下 

none: 表示 没有 元 素 。 

all: 默认 值 ， 表 示 针 对 所 有 元 素 ， 包 括 “:before” 和 “:after” 伪 元 素 。 





全 fF | IDENT: 指定 CSS 属性 列表 。 几 乎 所 有 色彩 、 大 小 或 位 置 等 相关 的 CSS 属性 ， 包 括 许多 新 
me 添加 的 CSS3 属性 ， 都 可 以 应 用 过 渡 ， 如 CSS3 变换 中 的 放大 、 缩 小 、 旋 转 、 斜 切 、 渐 变 等 。 
Note 【示例 】 在 下 面 示例 中 ， 指 定 动画 的 属性 为 背景 色 。 这 样 当 鼠 标 经 过 盒子 时 ， 会 自动 从 红色 背景 


| 过 渡 到 蓝 色 背景 ， 演 示 效 果 如 图 24.18 所 示 。 


<style type="text/css"> 
div{ 
margin: 10px auto; height: 80px: 
background: red: 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999; 
} 
div:hover { 
background-color: blue; 
人 # 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
} 
</style> 


<div></div> 


WD locolhosteo00/r x 屋 





(a) 默认 状态 (b) 鼠标 经 过 时 被 旋转 
图 24.18 ”定义 简单 的 背景 色 切 换 动画 


24.2.2 ”设置 过 渡 时 间 
transition-duration 属性 用 来 定义 转换 动画 的 时 间 长 度 ， 基 本 语法 如 下 所 示 : 


transition-duration:<time> [. <time>]*: 

| 初始 值 为 0， 适用 于 所 有 元 素 ， 以 及 “:before” 和 “:after” 伪 元 素 。 在 默认 情况 下 ， 动 画 过 渡 时 
| 间 为 0 秒 ， 所 以 当 指定 元 素 动画 时 ， 会 看 不 到 过 渡 的 过 程 ， 直 接 看 到 结果 。 
| 【示例 】 以 24.2.1 节 示 例 为 例 ， 下 面 示例 设置 动画 过 渡 时 间 为 2 秒 ， 当 鼠标 移 过 对 象 时 ， 会 看 到 
| 背景 色 从 红色 逐渐 过 渡 到 蓝 色 ， 演 示 效 果 如 图 24.19 所 示 。 
| div:hover { 

background-color blue: 

上 # 指 定 动画 过 渡 的 CSS 属性 */ 

transition-property: backeround-color: 
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上 # 指 定 动画 过 渡 的 时 间 关 
transition-duration:2s: 





图 24.19 设置 动画 时 间 
24.2.3 ”设置 延迟 过 渡 时 间 


transition-delay 属性 用 来 定义 开启 过 渡 动画 的 延迟 时 间 ， 基 本 语法 如 下 所 示 : 
transition-delay:<time> [, <time>]*: 


初始 值 为 0， 适 用 于 所 有 元 素 ， 以 及 “:before” 和 “:after” 伪 元 素 。 设 置 时 间 可 以 为 正 整数 、 负 
整数 和 零 ， 非 零 的 时 候 必须 设置 单位 是 s( 秒 ) 或 者 ms 毫秒 )， 为 负数 的 时 候 ， 过 渡 的 动作 会 从 该 
时 间 点 开始 显示 ， 之 前 的 动作 被 截断 。 为 正 数 的 时 候 ， 过 渡 的 动作 会 延迟 触发 。 

【示例 】 继 续 以 24.2.1 节 示例 为 基础 进行 介绍 ， 下 面 示例 设置 过 渡 动 画 推迟 2 秒 钟 后 执行 ， 则 当 
鼠标 移 过 对 象 时 ， 会 看 不 到 任何 变化 ， 过 了 2 秒 钟 之 后 ， 才 发 现 背 景色 从 红色 逐渐 过 渡 到 蓝 色 。 

div:hover { 

background-color: blue: 

人 # 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
店 指 定 动画 过 渡 的 时 间 */ 
transition-duration: 2s; 

必 指 定 动画 延迟 触发 */ 
transition-delay: 2s: 

} 


24.2.4 ”设置 过 渡 动 画 类 型 


transition-timing-function 属性 用 来 定义 过 渡 动 画 的 类 型 ， 基 本 语法 如 下 所 示 : 
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>. <number>. 
<number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,.<number>、 | 
<number>)]* 
属性 初始 值 为 ease， 取 值 简单 说 明 如 下 : 
ease: 平滑 过 渡 ， 等 同 于 cubic-bezier(0.25, 0.1, 0.25, 1.0) 函 数 ， 即 立方 贝 塞 尔 。 
linear: 线性 过 渡 ， 等 同 于 cubic-bezier(0.0, 0.0, 1.0, 1.0) 函 数 。 
ease-in: 由 慢 到 快 ， 等 同 于 cubic-bezier(0.42, 0, 1.0, 1.0) 函 数 。 
ease-out: 由 快 到 慢 ， 等 同 于 cubic-bezier(0, 0, 0.58, 1.0) 函 数 。 
ease-in-out: 由 慢 到 快 再 到 慢 ， 等 同 于 cubic-bezier(0.42, 0, 0.58, 1.0) 函 数 。 
cubic-bezier: 特殊 的 立方 贝 塞 尔 曲线 效果 。 
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【示例 】 继 续 以 24.2.1 节 示 例 为 基础 进行 介绍 ， 下 面 设置 过 滤 类 型 为 线性 效果 ， 代 码 如 下 所 示 : 
div:hover { 
backeround-color: blue: 
人 # 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
人 # 指 定 动画 过 渡 的 时 间 关 
transition-duration: 10s: 
/# 指 定 动画 过 渡 为 线性 效果 */ 
transition-timing-function: linear: 


24.2.5 ”设置 过 渡 触 发 动作 
| “css 过 流动 画 一 般 通过 动态 伪 类 触发 ， 如 表 24.1 所 示 。 
表 24.1 CSS 动态 伪 类 





动态 伪 类 说 明 
ink 未 访问 的 链接 
-visited 访问 过 的 链接 
hover 鼠标 经 过 元 素 
active 鼠标 单 击 元 素 





:focus 所 有 可 被 选中 的 元 素 元 素 被 选中 
也 可 以 通过 JavaScript 事件 触发 ， 包 括 click、focus、mousemove、mouseover、mouseout 等 。 


1. :hover 
最 常用 的 过 渡 触 发 方式 是 使 用 “:hover” 伪 类 。 
【示例 1】 下 面 示例 设计 当 鼠 标 经 过 div 元 素 时 , 该 元 素 的 背景 色 会 在 经 过 一 秒 钟 的 初始 延迟 后 ， 
于 两 秒 钟 内 动态 地 从 绿色 变 为 蓝 色 。 
<style type="text/css"> 
div{ 
margin: 10px auto: 
height: 80px: 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999: 
background-color: red: 
transition: background-color 2s ease-in 1s: 


2. :active 
“:active” 伪 类 表示 用 户 单 击 某 个 元 素 并 按 住 鼠 标 按钮 时 显示 的 状态 。 
【示例 2】 下 面 示例 设计 当 用 户 单 击 div 元 素 时 ， 该 元 素 被 激活 ， 这 时 会 触发 动画 ， 高 度 属性 从 
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200px 过 渡 到 400px。 如 果 按 住 该 元 素 ， 保 持 住 活动 状态 ， 则 div 元 素 始终 显示 400px 高 度 ， 松 开 鼠 
标 之 后 ， 又 会 恢复 原来 的 高 度 ， 如 图 24.20 所 示 。 








(a) 默认 状态 (b) 单 击 
图 24.20 定义 激活 触发 动画 


3.: focus 


“:focus” 伪 类 通常 会 在 表单 对 象 接收 键盘 响应 时 出 现 。 
【示例 3】 下 面 设计 当 输入 框 获取 焦点 时 ， 输 入 框 的 背景 色 逐 步 高 亮 显 示 ， 如 图 24.21 所 示 。 
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<legend> 用 户 登 录 </legend> 
<label for="name"> 姓 名 
<input type="text" id="name" name="name" > 
</label> 
<label for="pass"> 密 码 
<input type="password" id="pass" name="pass" > 


</label> 
a 


</form> 








图 24.21 定义 获取 焦点 触发 动画 
交 提示 : 将 “:hover” 擅 类 与 “:focus” 配 合 使 用 ， 能 够 丰富 鼠标 用 户 和 键盘 用 户 的 体验 。 


4. :checked 
“:checked” 伪 类 在 发 生 这 种 状况 时 触发 过 渡 。 
【示例 4】 下 面 示例 设计 当 复 选 框 被 选中 时 缓慢 缩 进 两 个 字符 ， 演 示 效 果 如 图 24.22 所 示 。 


<style type="text/css"> 
label.name { 
display: block: 
Iargin: 6px 2px: 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| inputype='text'] input[type="password"] { 

| padding: 4px: 

| border: solid 1px #ddd: 

| ， 

| input[type="checkbox"] { transition: margin 1s ease:} 

| input[type="checkbox"]:checked { margin-left: 2em:} 

| </style> 

| <fom id=fm-form action=" method=post> 

| <fieldset> 

| <legend> 用 户 登录 </legend> 

| <label class="name" for="name"> 姓 名 

| <input type="text" id="name" name="name" > 
| </label> 

| <p> 技 术 专长 <br> 

| <label> 

| <input type="checkbox" name="web" value="html" id=- "web_ 0"> 
| HIML</label><br> 

| <label> 

| <input type="checkbox" name="web" value= "css" id=-"web 1"> 
| Css</label><br> 

| <label> 
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<input type="checkbox" name="web" value="javascript" id="web 2"> 





JavaScript</label><br> 
</p> 
</fieldset> 
</form> 
图 24.22 定义 被 选中 时 触发 动画 
5. 媒体 查询 


触发 元 素 状态 变化 的 另 一 种 方法 是 使 用 CSS3 媒体 查询 ， 关 于 媒体 查询 详解 参考 下 章 内 容 。 

【示例 S】 下 面 示例 设计 div 元 素 的 宽度 和 高 度 为 49%X200px， 如 果 用 户 将 窗口 大 小 调整 到 
420px 或 以 下 ， 则 该 元 素 将 过 渡 为 100%X100px。 也 就 是 说 ， 当 窗口 宽度 变化 经 过 420px 的 阔 值 时 ， 
将 会 触发 过 渡 动 画 ， 如 图 24.23 所 示 。 


<style type="text/css"> 

div{ 
float: left: margin: 2pX: 
Width: 49%6: height: 200px: 
background: #93FB40; 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999: 
transition: width 1s ease, height 1s ease: 


} 
@media only screen and (max-width : 420px) { 
div{ 











(a) 当 窗 口 小 于 等 于 420px 宽度 (b) 当 窗口 大 于 420px 宽度 
图 24.23 设备 类 型 触发 动画 
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如 果 网 页 加 载 时 用 户 的 窗口 大 小 是 420px 或 以 下 , 浏览 器 会 在 该 部 分 应 用 这 些 样式 , 但 是 由 于 不 














| 会 出 现状 态 变化 ， 因 此 不 会 发 生 过 渡 。 


6. JavaScript 事件 
【示例 6】 下 面 示例 可 以 使 用 纯粹 的 CSS 伪 类 触发 过 渡 , 为 了 方便 用 户 理解 , 这 里 通过 jQuery 脚 


本 触发 过 渡 。 


<script type="text/javascript" src="images/iquery-1.10.2.1s"></script> 
‘<script type="text/javascript"> 
S$(function| { 

$("#button").click(functionO| { 

$(".box").toggleClass("change"): 

»; 
D; 
</script> 
<style type="text/css"> 
.box { 


margin:4px: 

background: #93FB40; 

border-radius: 12px: 

box-shadow: 2px 2px 2px #999: 

‘width: 50%: height: 100px: 

transition: width 2s ease, height 2s ease: 


} 

.Change { width: 100%:; height: 120px:} 

</style> 

<input type="button" jd="button" value=" 触 发 过 渡 动画 " /> 
<div class="box"></div> 


在 文档 中 包含 一 个 box 类 的 盒子 和 一 个 按钮 ， 当 单 击 按钮 时 ，jQuery 脚本 会 将 盒子 的 类 切换 为 


change， 从 而 触发 过 渡 动画 ， 演 示 效 果 如 图 24.24 所 示 。 


Ca) - Secto. > So | Socatort Sa | ©- S meecate.. ~ So | Siocatos 
有 发 过 省 动画 








二 人 是 (a) 默认 状态 (b)JavaScript 事件 激活 状态 


图 24.24 使 用 JavaScript 脚本 触发 动画 
上 面 演 示 了 样式 发 生变 化 会 导致 过 渡 动 画 ， 也 可 以 通过 其 他 方法 触发 这 些 更 改 ， 包 括 通过 


| JavaScript 脚本 动态 更 改 。 从 执行 效率 来 看 ， 事件 通常 应 当 通 过 JavaScript 触发 , 简单 动画 或 过 渡 则 应 
| 使 用 CSS 触发 。 
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24.3 帧 动画 


2012 年 4 月， W3C 发 布 了 CSS Animations 工作 草案 , 在 这 个 草案 中 描述 了 CSS 关键 帧 动画 的 基 | 
本 实现 方法 和 属性 。 目 前 最 新 版 本 的 主流 浏览 器 都 支持 CSS 帧 动画 ， 如 亚 10+、Firefox 和 Opera 浏 | 
览 器 均 支 持 不 带 前 级 的 动画 属性 animation， 而 旧版 浏览 器 则 支持 前 组 的 动画 ， 如 Webkit 引擎 支持 | 
-webkit-animation 属性 ,Mozilla Gecko 引擎 支持 -moz-animation 私有 属性 ,Presto 引擎 支持 -o-animation | 
私有 属性 ，IE 6 一 下 9 浏览 器 不 支持 animation 属性 。 | 
权威 参考 : http://www.w3.org/TR/css3-animations/。 


24.3.1 设置 关键 帧 
CSS3 使 用 @keyframes 定义 关键 帧 。 具 体 用 法 如 下 所 示 : 








@keyframes animationname { 
keyframes-selector { 
Css-styles:; 

} 
} 


其 中 参数 说 明 如 下 : 

animationname: 定义 动画 的 名 称 。 

keyframes-selector: 定义 帧 的 时 间 未 知 , 也 就 是 动画 时 长 的 百分比 , 合法 的 值 包括 : 0 一 100%、 

from 〈 等 价 于 0%) 、to 〈 等 价 于 100%) 。 

css-styles: 表示 一 个 或 多 个 合法 的 CSS 样式 属性 。 

在 动画 过 程 中 ， 用 户 能 够 多 次 改变 这 套 CSS 样式 。 以 百分比 来 定义 样式 改变 发 生 的 时 间 ,或 者 | 
通过 关键 词 fom 和 to。 为 了 获得 最 佳 浏览 器 支持 ， 设 计 关 键 帧 动画 时 ， 应 该 始终 定义 0 和 100% 位 置 
帧 。 最 后 ， 为 每 帧 定义 动态 样式 ， 同 时 将 动画 与 选择 器 绑 定 。 

【示例 】 下 面 示例 演示 如 何 让 一 个 小 方 盒 沿 着 方形 框 内 壁 匀速 运动 ， 效 果 如 图 24.25 所 示 。 


<style> | 

#wrap { 雍 定义 运动 轨迹 包含 框 */ | 
position:relative: 证 定义 定位 包含 框 ， 避 免 小 盒子 跑 到 外 面 运 动 */ | 
border:solid 1px red: | 
width:250px: height:250px: | 

} | 

#box { 上 定义 运动 小 盒 的 样式 */ | 
position:absolute: | 
jleft:0: top:0: | 
width: 50px: height: 50px: | 
background: #93FB40: | 
border-radius: 8px: 


box-shadow: 2px 2px 2px #999:; 
上 # 定 义 帧 动画 : 名 称 为 ball， 动 画 时 长 5 秒 ， 动 画 类 型 为 匀速 渐变 ， 动 画 无 限 播放 */ 
animation: ball $s linear infinite: 


“Sa 


ge Frrsst0sss mr 入 型 亲 适 ( 搁 刍 将 六 扳 ) 


人 * 定 义 关 键 帧 : 共 包 括 5 帧 ， 分 别 在 总 时 长 0、25%、50%、75%、100% 的 位 置 */ 
必 每 帧 中 设置 动画 属性 为 lef 和 top， 让 它们 的 值 匀速 渐变 ， 产 生 运动 动画 */ 
@keyframes ball { 

0% {left:0:top:0:;} 

25% {left:200px;top:0;} 

50% fleft:200px:top:200px:} 

75% {left:0:top:200px:;} 

100% {left:0:;top:0:} 


3 
</style> 
<div id="wrap"> 
<div id="box"></div> 
</div> 

















| 针 和 天 图 24.25 设计 小 盒子 运动 动画 
24.3.2 ”设置 动画 属性 

Animations 功能 与 Transitions 功能 相同 ， 都 是 通过 改变 元 素 的 属性 值 来 实现 动画 效果 。 它们 的 区 
别 在 于 : 使 用 Transitions 功能 时 只 能 通过 指定 属性 的 开始 值 与 结束 值 ， 然 后 在 这 两 个 属性 值 之 间 进 行 
| 平滑 过 渡 的 方式 来 实现 动画 效果 ， 因 此 不 能 实现 比较 复杂 的 动画 效果 ; 而 Animations 则 通过 定义 多 
| 个 关键 帧 以 及 定义 每 个 关键 帧 中 元 素 的 属性 值 来 实现 更 为 复杂 的 动画 效果 。 
1. 定义 动画 名 称 
使 用 animation-name 属性 可 以 定义 CSS 动画 的 名 称 ， 语 法 如 下 所 示 : 
animation-name:none |IDENT [. none|IDENT ]*: 
| 初始 值 为 none， 定 义 一 个 适用 的 动画 列表 。 每 个 名 字 用 来 选择 动画 关键 帧 ， 提 供 动画 的 属性 值 。 
| 如 名 称 是 none， 那 么 就 不 会 有 动画 。 
2. 定义 动画 时 间 
使 用 animation-duration 属性 可 以 定义 CSS 动画 播放 时 间 ， 语 法 如 下 所 示 : 
animation-duration:<time> [. <time>]*: 
在 默认 情况 下 该 属性 值 为 0， 这 意味 着 动画 周期 是 直接 的 ， 即 不 会 有 动画 。 当 值 为 负 值 时 ， 则 被 
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3. 定义 动画 类 型 

使 用 animation-timing-function 属性 可 以 定义 CSS 动画 类 型 ， 语 法 如 下 所 示 : 

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>, <number>, | 
mumber>, <number>) [. ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>.<number>, | 
<number>)]* | 

初始 值 为 ease， 取 值 说 明 可 参考 上 面 介 绍 的 过 渡 动 画 类 型 。 

4. 定义 延迟 时 间 | 

使 用 animation-delay 属性 可 以 定义 CSS 动画 延迟 播放 的 时 间 ， 语 法 如 下 所 示 : 

animation-delay:<time> [, <time>]*: 

该 属性 允许 一 个 动画 开始 执行 一 段 时 间 后 才 被 应 用 。 当 动画 延迟 时 间 为 0, 即 默 认 动画 延迟 时 间 ， 
则 意味 着 动画 将 尽快 执行 ， 否 则 该 值 指定 将 延迟 执行 的 时 间 。 

5. 定义 播放 次 数 

使 用 animation-iteration-count 属性 定义 CSS 动画 的 播放 次 数 ， 语 法 如 下 所 示 : 

animation-iteration-count:infinite | <number> [. infinite | <number>]*: 

默认 值 为 1， 这 意味 着 动画 将 从 开始 到 结束 播放 一 次 。infinite 表示 无 限 次 ， 即 CSS 动画 永远 重 
复 。 如 果 取 值 为 非 整数 ， 将 导致 动画 结束 一 个 周期 的 一 部 分 。 如 果 取 值 为 负 值 ， 则 将 导致 在 交 蔡 周期 
内 反 向 播放 动画 。 


6. 定义 播放 方向 
使 用 animation-direction 属性 定义 CSS 动画 的 播放 方向 ， 基 本 语法 如 下 所 示 : 
animation-direction:normal | alternate [. normal | alternate]*: 


默认 值 为 normal。 当 为 默认 值 时 ， 动 画 的 每 次 循环 都 向 前 播放 。 另 一 个 值 是 alternate， 设 置 该 值 
则 表示 第 偶数 次 向 前 播放 ， 第 奇数 次 向 反方 向 播放 。 








7. 定义 播放 状态 | 
使 用 animation-play-state 属性 定义 动画 正在 运行 还 是 暂停 ， 语 法 如 下 所 示 : | 
animation-play-state: pausedlrunning: 


初始 值 为 running。 其 中 paused 定义 动画 已 暂停 ，running 定义 动画 正在 播放 。 

容 提示 : 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 在 JavaScript 脚本 中 | 
用 法 如 下 : 

object.style.animationPlayState="paused" 


8. 定义 播放 外 状态 

使 用 animation-fill-mode 属性 定义 动画 外 状态 ， 语 法 如 下 所 示 : 
animation-fill-mode:none | forwards | backwards | both [ . none | forwards | backwards | both ]* 
初始 值 为 none， 如 果 提 供 多 个 属性 值 ， 以 逗号 进行 分 隔 。 取 值 说明 如 下 : 
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none: 不 设置 对 象 动画 之 外 的 状态 。 
forwards: 设置 对 象 状态 为 动画 结束 时 的 状态 。 
backwards: 设置 对 象 状态 为 动画 开始 时 的 状态 。 
全 7 | both: 设置 对 象 状态 为 动画 结束 或 开始 时 的 状态 。 
Co 【示例 】 下 面 示例 设计 一 个 小 球 ， 并 定义 它 水 平 向 左 运动 ， 动 画 结束 之 后 ， 再 返回 起 始点 位 置 ， 


效果 如 图 24.26 所 示 。 


| 
| <style> 


必 启 动 运动 的 小 球 ， 并 定义 动画 结束 后 返回 所 
-ball{ 
width: SO0px: height: SO0pX: 
background: #93FB40; 
border-radius: 100%; 
box-shadow:2px 2px 2px #999: 
animation:ball 1s ease backwards: 


图 图 加 


加 





必定 义 小 球 水 平 运动 关键 帧 六 
@keyframes ball{ 
0% {transform:translate(0,0):} 
100% {transform:translate(400px):} 
} 
</style> 
<div class="ball"></div> 





24.26 ”设计 运动 小 球 最 后 返回 起 始点 位 置 


24.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 和 提升 CSS3 动画 设计 技法 。 
24.4.1 设计 图 形 


设计 菱形 , 效果 如 图 24.27 所 示 ; 设计 平行 四 边 形 , 效果 如 图 24.28 


所 示 。 
设计 星 形 ， 效果 如 图 24.29 所 示 ; 设计 心 形 ， 效 果 如 图 24.30 所 示 。 
具体 代码 解析 请 扫 码 学 习 。 
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图 24.27 设计 菱形 图 24.28 ”设计 平行 四 边 形 


x 
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图 24.29 设计 星 形 图 24.30 设计 心 形 
24.4.2 设计 冒 泡 背 景 按钮 


本 例 应 用 CSS3 过 渡 动画 特效 ， 为 按钮 背景 图 像 定义 动态 移动 效果 ， 
设计 当 鼠 标 经 过 时 , 按钮 背景 绚丽 多 彩 ,不 断 产生 冒 泡 动画 效果 ,如 图 24.31 
所 示 。 

具体 操作 步骤 请 扫 码 学 习 。 





24.31 设计 背景 冒 泡 效果 的 按钮 样式 


24.4.3 ”设计 动画 效果 菜单 


菜单 项 时 ， 会 以 动画 形式 从 中 文 界面 缓慢 翻转 到 英文 界面 ， 或 者 从 英文 界 
面 翻转 到 中 文 界 面 ， 效 果 如 图 24.32 所 示 。 
具体 操作 步骤 请 扫 码 学 习 。 线 上 阅读 
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图 24.32 ”设计 动画 翻转 菜单 样式 
24.4.4 ”设计 照片 特效 


加 本 例 使 用 CSS3 阴影 、 透 明 效果 以 及 变换 ， 让 图 片 随意 贴 在 墙 上 ， 
当 鼠 标 移动 到 图 片上 时 ， 会 自动 放大 并 垂直 摆 放 ， 演 示 效 果 如 图 24.33 
所 示 。 在 默认 状态 下 ， 图 片 被 随意 显示 在 墙 面 上 ， 鼠 标 经 过 图 片 时 ， 图 
片 会 竖 直 摆 放 ， 并 被 放大 显示 。 

具体 代码 解析 请 扫 码 学 习 。 








图 24.33 ”设计 挂图 效果 
24.4.5 ”设计 立体 盒子 


车 加 。 回 澡 二 六 四 使 用 2D 多 重 变 换 制作 一 个 正方 体 ， 演 示 效 果 如 图 24.34 所 示 ; 使 
: 用 3D 多 重 变换 制作 一 个 正方 体 ， 演 示 效 果 如 图 24.35 所 示 。 
具体 代码 解析 请 扫 码 学 习 。 
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图 24.34 设计 2D 变换 盒子 24.35 设计 3D 盒子 
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24.4.6 ”旋转 盒子 


继续 以 24.4.5 节 示 例 为 基础 ， 本 节 示 例 设 计 使 用 animation 属性 设计 
盒子 旋转 显示 。 
具体 说 明和 操作 步骤 请 扫 码 学 习 。 


24.4.7 ”设计 翻转 广告 


本 例 设计 当 鼠 标 移动 到 产品 图 片上 时 ， 产 品 信息 翻转 滑 出 ， 效 果 如 
图 24.36 所 示 。 在 默认 状态 下 只 显示 产品 图 片 ， 而 产品 信息 隐藏 不 可 见 。 
当 用 户 鼠 标 移动 到 产品 图 像 上 时 ， 产 品 图 像 慢 慢 往 上 旋转 使 产品 信息 展示 
出 来 ， 而 产品 图 像 慢 慢 隐藏 起 来 ， 看 起 来 就 像 是 一 个 旋转 的 盒子 。 

具体 代码 解析 请 扫 码 学 习 。 





高 吻合 员 竺 权 专电 
丙 Af 上 折 再 入 fg5 多 会 员 特权 
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| 





(a) 默认 状态 (b) 翻转 状态 
24.36 设计 3D 翻转 广告 牌 


24.4.8 设计 跑步 效果 


本 例 设计 一 个 跑步 动画 效果 ， 主 要 使 用 CSS3 帧 动画 控制 一 张 序列 人 
物 跑步 的 背景 图 像 ， 在 页 面 固定 “镜头 ”中 快速 切换 实现 动画 效果 ， 如 
图 24.37 所 示 。 

有 具体 操作 步骤 请 扫 码 学 习 。 











图 24.37 设计 跑步 的 小 人 
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| 24.4.9 ”设计 折 芭 面板 
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[ss | 本 例 使 用 CSS3 的 目标 伪 类 :target) 设计 折 装 面板 效果 ， 没 有 使 
用 JavaScript 脚 本 ,使 用 过 渡 属 性 设计 滑动 效果 , 折 装 动画 效果 如 图 24.38 
所 示 。 


具体 代码 解析 请 扫 码 学 习 。 











图 24.38 ”设计 折合 面 板 


24.5 在 线 练 司 


练习 CSS3 动画 一 般 设 计 方法 ， 培 养 灵活 应 用 交互 式 动态 样式 的 基本 能 力 
5 国 
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CSS3 媒体 查询 


2017 年 9 月 ，W3C 发 布 了 媒体 查询 ( Media Query Level 4) 候选 推荐 标准 规范 ， 它 扩 
展 了 已 经 发 布 的 媒体 查询 的 功能 。 该 规范 用 于 CSS 的 @media 规则 ， 可 以 为 文档 设 定 将 定 条 
国 gs 


件 的 样式 ， 也 可 用 于 HIML 、JavaScript 等 语言 。 
权威 参考 : http://www.w3.org/TR/css3-mediaqueries/ 






【 学 习 重 点 】 

MH 了 解 CSS3 媒体 类 型 。 

MH 正常 使 用 媒体 查询 的 条 件 规则 。 
吓 ” 设 计 响 应 不 同 设备 的 网 页 市 局 。 


mR FUrrist6sss wj 浊 本 着 (家 名 半生 扳 ) 


25.1 媒体 查询 基础 


有 | 
全 媒体 查询 可 以 根据 设备 特性 ， 如 屏幕 宽度 、 高 度 、 设 备 方向 〈 横 向 或 纵向 )， 为 设备 定义 独立 的 
Css 样式 表 。 一 个 媒体 查询 由 一 个 可 选 的 媒体 类 型 和 零 个 或 多 个 限制 范围 的 表达 式 组 成 ， 如 宽度 、 高 
| 
| 度 和 颜色 。 


25.1.1 媒体 类 型 和 媒体 查询 


| 
| CSS 2 提出 媒体 类 型 (Media Type) 的 概念 ， 它 允许 为 样式 表 设 置 限制 范围 的 媒体 类 型 。 例 如 ， 
| 仅 供 打印 的 样式 表 文件 、 仅 供 手机 泻 染 的 样式 表 文 件 、 仅 供电 视 泻 染 的 样式 表 文 件 等 ， 具 体 说 明 如 
| 表 25.1 所 示 。 


表 25.1 CSS 媒体 类 型 





通过 HTML 标签 属性 media 属性 定义 样式 表 的 媒体 类 型 ， 具 体 方法 如 下 : 
加 ”定义 外 部 样式 表 文件 的 媒体 类 型 。 
<link href="csss.css" rel="stylesheet" type="text/css" media="handheld" /> 


| 类 型 支持 的 浏览 器 说 明 
| aural Opera 用 于 语音 和 音乐 合成 器 

| braille Opera 用 于 触觉 反馈 设备 

| handheld Chrome.Safari.Opera 用 于 小 型 或 手持 设备 

| print 所 有 浏览 器 用 于 打印 机 

| projection Opera 用 于 投影 图 像 ， 如 幻灯 片 

| screen 所 有 浏览 器 用 于 屏幕 显示 器 

| t Opera 用 于 使 用 固定 间距 字符 格 的 设备 。 如 电 传 打字 机 和 终端 
| _w Opera 用 于 电视 类 设备 

| embossed Opera 用 于 凸 点 字符 〈 盲 文 ) 印刷 设备 
| speech Opera 用 于 语音 类 型 

| all 所 有 浏览 器 用 于 所 有 媒体 设备 类 型 

| 

| 

| 

| 


加 ”定义 内 部 样式 表 文件 的 媒体 类 型 。 
<style type="text/css" media="screen"> 
style> 


| CSS3 在 媒体 类 型 基础 上 ， 提 出 了 Media Queries (媒体 查询 ) 的 概念 。 媒 体 查询 比 CSS2 的 媒体 
| 类 型 功能 更 强大 、 更 加 完善 。 两 者 主要 区 别 : 媒体 查询 是 一 个 值 或 一 个 范围 的 值 ， 而 媒体 类 型 仅仅 是 
| 设备 的 匹配 。 媒 体 类 型 可 以 帮助 用 户 获取 以 下 数据 。 

| 回 ”浏览 器 窗口 的 宽 和 高 。 

设备 的 宽 和 高 。 

| 回 ”设备 的 手持 方向 ， 横 向 还 是 竖 向 。 
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回 ”分辩 率 。 
例如 ， 下 面 这 条 导入 外 部 样式 表 的 语句 。 


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 


在 media 属性 中 设置 媒体 查询 的 条 件 “(max-width: 600px)”: 当 屏 幕 宽度 小 于 或 等 于 600px， 则 | 
调用 small.css 样式 表 来 演 染 页 面 。 i 


25.1.2 ”使 用 @media | 


CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 : 


@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{ 
店 CSS 样式 列表 */ 
} 


参数 简单 说 明 如 下 : 

<media_type>: 指定 媒体 类 型 ， 具 体 说 明 参 考 表 25.1。 

<expression>: 指定 媒体 特性 。 放 在 一 对 圆 括号 中 ， 如 “(min-width:400px)”。 

逻辑 运算 符 ， 如 and 〈 罗 辑 与 ) 、not (逻辑 否 ) 、only (兼容 设备 ) 等 。 

媒体 特性 包括 13 种 ,接受 单个 的 逻辑 表达 式 作 为 值 , 或 者 没有 值 。 大 部 分 特性 。 国 
接受 min 或 max 的 前 级 ， 用 来 表示 大 于 等 于 ， 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 
大 于 号 (>) 和 小 于 号 (<) 字符 。 kt 

各 种 媒体 特性 的 简单 说 明 请 扫 码 了 解 。 线 上 阅读 

在 CSS 样式 的 开头 必须 定义 @media 关键 字 ， 然 后 指定 媒体 类 型 ， 再 指定 媒体 特性 。 媒 体 特性 的 
格式 与 样式 的 格式 相似 ， 分 为 两 部 分 ， 由 冒号 分 隔 ， 冒 号 前 指定 媒体 特性 ， 冒 号 后 指定 该 特性 的 值 。 

例如 ， 下 面 语 句 指定 了 当 设 备 显示 屏幕 宽度 小 于 640px 时 所 使 用 的 样式 。 

@media screen and (max-width: 639px) { 

让 样式 代码 */ 










} 
可 以 使 用 多 个 媒体 查询 将 同一 个 样式 应 用 于 不 同 的 媒体 类 型 和 媒体 特性 中 , 媒体 查询 之 间 通 过 去 | 
号 分 隔 ， 类 似 于 选择 器 分 组 。 


@media handheld and (min-width:360px).screen and (min-width:480px) { 
刻 样 式 代码 */ 





} 
可 以 在 表达 式 中 加 上 not、only 和 and 等 逻辑 运算 符 。 


/下 面 样式 代码 将 被 使 用 在 除 便携 设备 之 外 的 其 他 设备 或 非 彩色 便携 设备 中 
@media not handheld and (color) { 
证 样式 代码 */ 


} 
/下 面 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 
@media all and (not color) { 

话 样 式 代码 */ 


only 运算 符 能 够 让 那些 不 支持 媒体 查询 ， 但 是 支持 媒体 类 型 的 设备 忽略 表达 式 中 的 样式 。 例 如 : 
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@media only screen and (color) { 
刻 样 式 代码 */ 
} 
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支持 媒体 查询 的 设备 ， 能 够 正确 地 读 取 其 中 的 样式 ， 仿 佛 only 运算 符 不 存在 一 样 ， 对 于 不 支持 
媒体 查询 ， 但 支持 媒体 类 型 的 设备 (如 焉 8) 来 说 ， 可 以 识别 @media screen 关键 字 ， 但 是 由 于 先 读 
取 的 是 only 运算 符 ， 而 不 是 screen 关键 字 ， 将 忽略 这 个 样式 。 





| 窑 提示 : 媒体 查询 也 可 以 用 在 @import 规则 和 <link> 标 签 中 。 例 如: 


@import url(example.css) screen and (width:800px): 
// 下 面 代码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland.css 样式 表 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> 


25.1.3 应 用 @media 


【示例 1】and 运算 符 用 于 符号 两 边 规则 均 满 足 条 件 的 匹配 。 


@media screen and (max-width : 600px) { 
/匹配 宽度 小 于 等 于 600px 的 屏幕 设备 */ 


是 


【示例 2】not 运算 符 用 于 取 非 ， 所 有 不 满足 该 规则 的 均 匹 配 。 


@media not print { 


让 匹 配 除 了 打印 机 以 外 的 所 有 设备 */ 


} 


4 注 意 ; not 仅 应 用 于 整个 媒体 查询 ， 


@media not all and (max-width : 500px) {} 


让 等 价 于 */ 


@media not (all and (max-width : S00px)) 他 


族 而 不 是 */ 


@media (not all) and (max-width : 


500px) {} 


在 去 号 媒体 查询 列表 中 ，not 仅 会 否定 它 所 在 的 媒体 查询 ， 而 不 影响 其 他 媒体 查询 。 
如 果 在 复杂 的 条 件 中 使 用 not 运算 符 ， 要 显 式 添加 小 括号 ， 避 免 歧 义 。 
【示例 3】“,”( 豆 号 ) 相当 于 or 运算 符 ， 用 于 两 边 有 一 条 满足 则 匹配 。 


@media screen , (min-width : 800px) { 
让 匹配 屏幕 或 者 宽度 大 于 等 于 800px 的 设备 */ 


} 


【示例 4】 在 媒体 类 型 中 ，all 是 默认 值 ， 匹 配 所 有 设备 。 


@mediaall { 


上 # 可 以 过 滤 不 支持 media 的 浏览 器 */ 


} 
常用 的 媒体 类 型 还 有 : screen 





匹配 屏幕 显示 器 , print 匹配 打印 输出 , 更 多 媒体 类 型 可 以 参考 表 25.1。 
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【示例 5】 使 用 媒体 查询 时 ， 必 须要 加 括号 ， 一 个 括号 就 是 一 个 查询 。 


@media (max-width : 600px) { 
让 匹配 界面 宽度 小 于 等 于 600px 的 设备 */ 


@media (min-width : 400px) { | 有 
上 * 匹 配 界面 宽度 大 于 等 于 的 设备 *#/ | 
) 





@media (max-device-width : 800px) { | 
上 匹配 设备 〈 不 是 界面 宽度 小 于 等 于 800px 的 设备 */ | 
} 
@media (min-device-width : 600px) { 
#* 匹 配 设备 〈 不 是 界面 ) 宽度 大 于 等 于 600px 的 设备 */ 
} 


交 提示 : 在 设计 手机 网 页 时 ， 应 该 使 用 device-width/device-height， 因 为 手机 浏览 器 默认 会 对 页 面 | 
进行 一 些 缩放 ， 如 果 按 照 设备 宽 和 高 来 进行 匹配 ， 会 更 接近 预期 的 效果 。 
【示例 6】 媒 体 查 询 允 许 相互 嵌 套 ， 这 样 可 以 优化 代码 ， 避 免 元 余 。 
@media not print { 
让 通用 样式 */ 
@media (max-width:600px) { 
人 # 此 条 匹配 宽度 小 于 等 于 600px 的 非 打印 机 设备 */ 
} 
@media (min-width:600px) { 
人 # 此 条 匹配 宽度 大 于 等 于 600px 的 非 打印 机 设备 */ 
} 


} 
【示例 7】 在 设计 响应 式 页 面 时 ， 用 户 应 该 根据 实际 需要 ， 先 确定 自 适 应 分 辩 率 的 阔 值 ， 也 就 是 | 
页 面 响应 的 临界 点 。 


@media (min-width: 768px){ 
让 >=768px 的 设备 */ 


} 

@media (min-width: 992px){ 
谍 >=992px 的 设备 */ 

} 

@media (min-width: 1200){ 
上 庆 >=1200px 的 设备 */ 


} 


< 负 注意 : 下 面 样式 顺序 是 错误 的 ， 因 为 后 面 的 查询 范围 将 覆盖 掉 前 面 的 查询 范围 ， 导 致 前 面 的 媒体 
查询 失效 。 
@media (min-width: 1200){ } 
@media (min-width: 992px){ } 
@media (min-width: 768px){ } 
因此 ， 当 我 们 使 用 min-width 媒体 特性 时 ， 应 该 按 从 小 到 大 的 顺序 设计 各 个 阔 值 。 同 理 ， 如 果 使 
用 max-width， 就 应 该 按 从 大 到 小 的 顺序 设计 各 个 阔 值 。 
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@media (max-width: 1199){ 
上 # <=1199px 的 设备 */ 
} 


Y | @media (max-width: 991px){ 
鲜 | 上 # <=991px 的 设备 */ 


br 
@media (max-width: 767px){ 


| 大 <=768px 的 设备 */ 
} 


| 【示例 8】 用 户 可 以 创建 多 个 样式 表 ， 以 适应 不 同 媒体 类 型 的 宽度 范围 。 当 然 ， 更 有 效率 的 方法 
| 是 将 多 个 媒体 查询 整合 在 一 个 样式 表 文 件 中 ， 这 样 可 以 减少 请 求 的 数量 。 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 


让 样式 列表 */ 
} 
@media only screen and (min-width : 321px) { 
让 样式 列表 */ 
} 
ia only screen and (max-width : 320px) { 
/# 样 式 列表 */ 
} 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 【示例 9】 如 果 从 资源 的 组 织 和 维护 的 角度 考虑 ， 可 以 选择 使 用 多 个 样式 表 的 方式 来 实现 媒体 查 
| 询 ， 这 样 做 更 高 效 。 

| <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 

| <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 

| <link rel="stylesheet" media="print" href="print.css" /> 

| 
| 
| 
| 
| 
| 
| 
| 


【示例 10】 使 用 orientation 属性 可 以 判断 设备 屏幕 当前 是 横 屏 〈 值 为 landscape〉 还 是 竖 屏 ( 值 
为 portrait) 。 
| @media screen and (orientation: landscape) { 
.iPadLandscape { 
width: 30%; 
float: right: 
} 
} 
@media screen and (orientation: portrait) { 
.iPadPortrait {clear: both:} 
| } 
| 
| 不 过 orientation 属性 只 在 iPad 上 有 效 ， 对 于 其 他 可 转 屏 的 设备 (如 iPhone)， 可 以 使 用 
| min-device-width 和 max-device-width 来 变通 实现 。 
【拓展 】 
| 媒体 查询 仅 是 一 种 纯 CSS 方式 实现 响应 式 Web 设计 的 方法 ， 用 户 还 可 以 使 用 JavaScript 库 来 实 
| 现 同样 的 设计 。 例 如 ， 下 载 css3-mediaqueries.js (http://code.google.com/p/css3- mediaqueries-js/)， 然 


| 后 在 页 面 中 调用 。 对 于 旧版 浏览 器 (如 正 6、7、8) 可 以 考虑 使 用 css3-mediaqueries.js 进行 兼容 。 
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<!-[f1tIE FP 
‘<script sre="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> 
<![endif-> 


【示例 11】 下 面 代码 演示 了 如 何 使 用 jQuery 来 检测 浏览 器 宽度 ， 并 为 不 同 的 视 口 调用 不 同 的 样 | 
式 表 。 | 


‘<script type="text/javascript" src="http://ajax.g00gleapis.com/ajax/libs/iquery/1.9.1/jquery.min.is"></script> 
‘<script type="text/javascript"> | 
$(documenb ready(functionO{ | 
$(window).bind("resize", resizeWindow): 
function resizeWindow(e){ 
var newWindowWidth = $(window).widthO: 
这 newWindowWidth < 600){ 
S$("link[rel=stylesheet]").attr( {href : "mobile.css"}); 





”| 
else if(newWindowWidth > 600){ 


S$("link[rel=stylesheet]").attr( {href : "style.css"}): 


25.2 案例 实战 


本 节 将 通过 几 个 实例 练习 CSS3 媒体 查询 的 网 页 应 用 。 
25.2.1 判断 显示 屏幕 宽度 


本 示例 设计 当 显 示 屏 幕 宽度 小 于 等 于 600px 时 ， 则 高 亮 显示 <div class="wrapper b"> 测 试 条 ,并 在 | 视频 讲解 
底部 显示 提示 信息 : 小 于 等 于 600px， 当 显示 屏幕 宽度 介 于 600px 和 900px 之 间 时 ， 则 高 亮 显示 <div 
class="wrapper c"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 介 于 600px 和 900px 之 间 ; 显示 屏幕 宽度 大 于 等 | 
于 900px 时 ， 则 高 亮 显示 <div class="wrapper d"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 大 于 等 于 900px; | 
当 设备 宽度 小 于 等 于 480px 时 ， 则 高 亮 显示 <div class="wrapper a"> 测 试 条 。 演 示 效 果 如 图 25.1 所 示 。 | 











(a) 显示 屏幕 宽度 小 于 等 于 600px (b) 显示 屏幕 宽度 介 于 600px 和 900px 之 间 
图 25.1 使 用 @media 规则 


.541 。 


ee 














(c) 显示 屏幕 宽度 大 于 等 于 900px 
图 25.1 使 用 @media 规则 〈 续 ) 





线 上 阅读 


具体 代码 解析 请 扫 码 学 习 。 
25.2.2 ”设计 响应 式 版 式 


本 例 在 页 面 中 设计 3 个 栏目 : 

<div id="main">: 主要 内 容 栏目 。 

<div id="sub">: 次 要 内 容 栏 目 。 

回 ”<div id="sidebar">: 侧 边栏 栏目 。 

设计 当 显示 屏幕 宽度 在 999px 以 上 时 ， 三 栏 并 列 显示 ， 预 览 效果 如 图 25.2 所 示 。 





© EET SET ET 


水 调 歌 头 ' 明 月 几时 有 词 人 列表 
苏轼 
两 式 中 伏 ， 次 这 日， 融 ， 放 此 竺 ， 养 了 内。 
天 上 二 亲信 是 和 年。 作 了 和 风 分 去 ， 又 也 者 
过。 抑 机 和 请， 何 议 在 人 订 人 
pela dA Di 
卫 信 ;此 古诗 主 、 人 和 人 长久 ， 午 里 闪闪 兴 





25.2 ”显示 屏幕 宽度 在 999px 以 上 时 页 面 显示 效果 


当 显 示 屏 幕 宽度 在 639px 以 上 、1000px 以 下 时 ， 两 栏 显示 ， 预 览 效果 如 图 25.3 所 示 ; 当 显示 屏 
幕 宽度 在 640px 以 下 时 ， 三 个 栏目 从 上 往 下 堆肥 显示 ， 预 览 效果 如 图 25.4 所 示 。 


< » EET rr Ep 


水 调 歌 头 ' 明 月 几时 有 


苏轼 
再 原 中 秋 。 次 议 达 昌 ,大 茸 ， 作 此 靖 ， 美 永 了 由 - 


Wn 明月 几 j 有 ? 把 厅 问 半天 。 不 向 天 上 宫 阅 ， 今 瀛 是 何 年 。 禾 
词 人 列表 EE 


: 转 个 则 ， 低 缚 户 ， 妥 无 肯 。 不 应 有 伺 ， 何 事 攻 向 别 时 加 ?人 
> 人 千 
* Hx 








图 25.3 宽度 在 639px 以 上 、1000px 以 下 时 效果 
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转 朱 阅 ， 任 纵 户 ， 昭 无量 .不 应 有 恨 ， 何 事 长 向 别 时 回 ? 人 有 非 欢 高 舍 ， 户 有 阳 旷 
园 读 ,此 事 古 难 全 。 位 原 人 长 丸 ， 千 里 闪 婵 蜗 - 





宋词 精 选 





图 25.4 宽度 在 640px 以 下 时 效果 





具体 代码 解析 请 扫 码 学 习 。 
25.2.3 ”设计 响应 式 菜单 


本 例 设计 一 个 响应 式 菜单 ， 能 够 根据 设备 显示 不 同 的 伸缩 盒 布 局 效果 。 在 小 屏 设备 上 ， 从 上 到 下 
显示 ; 在 默认 状态 下 ， 从 左 到 右 显 示 ， 右 对 齐 盒子 ; 当 设 备 小 于 801px 时 ， 设 计 导 航 项 目 分 散 对 齐 显 
示 ， 示 例 预览 效果 如 图 25.5 所 示 。 








D localhosymysitentest x 
入 iDlocalhostr 究 夺回 三 


locabesynyshe/ estlt. x 
所 3 © Dlocalhost/mysite/testhtml 





(a) 小 于 601px 屏幕 (b) 介 于 600 和 800px 之 间 屏 幕 





3 © Dlocalhost/mysite/testhtml 








(c) 大 于 799px 屏幕 | 
图 25.5 定义 伸缩 项 目 居中 显示 
具体 代码 解析 请 扫 码 学 习 。 
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25.2.4 ”设计 自动 隐藏 布局 


本 例 设计 一 个 响应 式 页 面 布局 效果 ,并 能 根据 显示 屏幕 宽度 变化 自动 隐藏 或 调整 版 式 显示 。 演示 
效果 如 图 25.6 所 示 。 





水 调 歌 头 ' 明 月 几时 有 
苏轼 
而后 H 秋 ,次 饮 达 9， 大 拆 ， 作 此 记 , 生子 自 。 


明月 几时 有 ? 把 酒 同 青天 Ey 生年- 我 襄 乘 风 归 去 ， 又 型 接 酝 玉 
平 ， 训 处 不 注 本 起 下 天 敌 在 人 | 


转 朱 图 ， 低 弹 户 ， 归 无 隔 。 不 应 有 呆 ， 何 事 长 向 8 时 回 ? 人 有 夏天 高 台 ， 月 有 阳 戎 加 
缺 ， 此 事 古 蕉 全 如 千里 其 炬 清 。 


宋词 精 先 





(a) 平板 屏幕 下 效果 


SK 

| 唐诗 员 怕 

| 水 得 歌 尖 明月 Ju 有 

I 

两 辰 中 秋 ， 区 议 达旦 ， 大 蓉 ， 作 此 其 ， 芥 什 子 由 。 

A . 天 。 不 知 天 - 
和 和 EE Ra 


忆 绩 户 ， 且 元 蝇 。 不 应 有 恨 ， 何 事 长 向 时 


转 寺 | | 
网 人 术语 s 甩 由 和 加 这， 此 本 区 全 得 压 
长 久 , 千 


词 人 列表 
。 后 昔 
* 圭 千 昭 





(b) 手机 屏幕 下 效果 











回 a pp 
i 图 25.6 ”设计 不 同 宽度 下 的 视图 效果 
具体 操作 步 又 请 扫 码 学 习 。 
| 25.2.5 设计 自 适应 手机 页 
四 | 
视频 讲 盘 | ”本 例 设计 页 面 宽度 为 980px， 对 于 桌面 屏幕 来 说 ， 该 宽度 适用 于 任何 宽 于 1024px 的 分 辩 率 。 通 


| 过 媒体 查询 监测 宽度 小 于 980px 的 设备 ,并 将 页 面 宽 度 由 固定 方式 改 为 液态 版 式 , 布局 元 素 的 宽度 随 
」 着 浏览 器 窗口 的 尺寸 变化 进行 调整 。 当 可 视 部 分 的 宽度 进一步 减 小 到 650px 以 下 时 , 主要 内 容 部 分 的 


.544 。 
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容器 宽度 会 增 大 至 全 屏 ， 而 侧 边栏 将 被 置 于 主 内 容 部 分 的 下 方 ， 整 个 页 面 变 为 单列 布局 。 演示 效果 如 | 
图 25.7 所 示 。 





图 25.7 在 不 同 宽度 下 的 视图 效果 
具体 操作 步骤 请 扫 码 学 习 。 





25.3 在 线 练 习 


1. 练习 响应 式 网 页 设计 。 





在 线 练习 


2. 复习 CSS3 重要 属性 ， 强 化 训练 和 应 用 CSS3 新 功能 的 能 力 。 
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